From 35439296bd80e84f0788e4ee54e96c01f51d3cbc Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 7 Sep 2022 09:57:38 +0200 Subject: [PATCH] up display of list account --- public/stylesheets/style.css | 29 +++++++++++++++++++- routes/index.js | 27 ++++++++++++------- views/index.jade | 52 +++++++++++++----------------------- 3 files changed, 64 insertions(+), 44 deletions(-) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 9977d7a..b70b012 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -17,8 +17,17 @@ a { select{ padding:1rem; margin: 1em 0; + border: solid 3px transparent; +} +label { + float:left; + display: block; + width: 100%; + margin-top: 0.5rem; +} +input{ + margin-bottom: 0.5rem; } - .wip{ color: grey; padding: 1rem; @@ -34,4 +43,22 @@ select{ .account__avatar-overlay:hover{ cursor:pointer; border: solid 3px grey; +} +.images{ + clear:both; + display: flex; +} +.images .clickable{ + width: 20%; + margin-right: 1em; + cursor:pointer; + text-align: center; +} +.images .clickable:hover{ + background: #2F6FAB; +} + +.changed{ + box-shadow: 0 0 1em #2F6FAB; + border: solid 3px #2F6FAB; } \ No newline at end of file diff --git a/routes/index.js b/routes/index.js index e0f96d7..749babd 100644 --- a/routes/index.js +++ b/routes/index.js @@ -2,38 +2,47 @@ var express = require('express'); var router = express.Router(); var sqlite3 = require('sqlite3'); var Masto = require('mastodon'); +// change this object to fit your multi accounts const accounts_to_select = [ { label: "tykayn", - value: "tykayn" + value: "tykayn", + src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/000/001/original/6388tykayn.gif" }, { label: "modominem", - value: "modominem" + value: "modominem", + src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/152/770/original/c62bb94381dc1f75.png" }, { label: "qzine", - value: "qzine" + value: "qzine", + src :"https://mastodon.cipherbliss.com/system/accounts/avatars/000/003/032/original/2bb8b90d21d3fdca.jpg" }, { label: "curator", - value: "curator" + value: "curator", + src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/002/974/original/8e48623291e49afe.jpg" }, { label: "kurator", - value: "kurator" + value: "kurator", + src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/162/067/original/bb374d2c6a361b6d.jpg" }, { label: "voix du nucléaire", - value: "voixdunucleaire" + value: "voixdunucleaire", + src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/107/055/original/7dac1a35f1423b94.jpg" }, { label: "The greatest Meme", - value: "meme" + value: "meme", + src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/002/978/original/b2f2e817572c93e9.png" }, { label: "cil de gometz", - value: "cil_gometz" + value: "cil_gometz", + src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/107/055/original/7dac1a35f1423b94.jpg" }, ] const default_times = ['08:02:00', '08:42:00', '09:10:00', '09:15:00', '10:22:00', '12:22:00'] @@ -44,8 +53,6 @@ let schedule_time = ''; router.get('/', function (req, res, next) { if (!req.body.schedule_time) { - - schedule_time = default_times[Math.floor(Math.random() * default_times.length)]; } res.render('index', {accounts_to_select, reqBody: req.body, schedule_time}); diff --git a/views/index.jade b/views/index.jade index 00e3bfb..d45f30d 100644 --- a/views/index.jade +++ b/views/index.jade @@ -9,40 +9,21 @@ block content //form(action="/add-to-queue",method="post") form(action="/direct-post",method="post") span.account - span Choix du compte + span="Choix du compte parmi les " + span=accounts_to_select.length + br - //.drawer--account - // .account__avatar(style='width: 48px; height: 48px; background-size: 48px 48px; background-image: url("https://mastodon.cipherbliss.com/system/accounts/avatars/108/409/825/840/442/987/original/eea3627456786998.jpg");') - // .navigation-bar__profile - // a.permalink.acct(href='https://mastodon.cipherbliss.com/@voixdunucleaire') - // strong @voixdunucleaire - - - //p=accounts_to_select.length - - select(method="post", name="author", value=bodyReq? bodyReq.author:"", id="author_select") - option(value="tykayn") - span TyKayn - option(value="voixdunucleaire") - span voix du nucléaire - option(value="modominem") - span modo minem - option(value="curator") - span curator - option(value="qzine") - span qzine - option(value="meme") - span meme - option(value="cil_gometz") - span CIL Gometz - - // each item in accounts_to_select.length ? item : ['There are no values'] - // option(value=item.label) - // span=item.value + div.images + each val, index in accounts_to_select + div.clickable(onclick=`selectAccount('${val.value}')`) + img.account__avatar-overlay(src=`${val.src}`) + br + span=val.label br - img.account__avatar-overlay(src="https://mastodon.cipherbliss.com/system/accounts/avatars/000/003/032/original/2bb8b90d21d3fdca.jpg", onclick="selectAccount('qzine')") - img.account__avatar-overlay(src="https://mastodon.cipherbliss.com/system/accounts/avatars/000/107/055/original/7dac1a35f1423b94.jpg", onclick="selectAccount('cil_gometz')") - img.account__avatar-overlay(src="https://mastodon.cipherbliss.com/system/accounts/avatars/000/002/978/original/b2f2e817572c93e9.png", onclick="selectAccount('meme')") + select(method="post", name="author", value=bodyReq ? bodyReq.author : "", id="author_select") + each val, index in accounts_to_select + option(value=val.value) + span=val.label div.compose-form__autosuggest-wrapper .autosuggest-textarea label @@ -68,7 +49,12 @@ block content script. function selectAccount(somePseudo) { console.log('account selected', document.querySelector('#author_select').value) - document.querySelector('#author_select').value = somePseudo + let selector=document.querySelector('#author_select'); + selector.value = somePseudo + selector.classList.add("changed") + setTimeout(()=>{ + selector.classList.remove("changed") + },500) console.log('account changed', somePseudo) }