From 14f7dbc34fad9ff44d89109edcad233aa33c5faf Mon Sep 17 00:00:00 2001 From: Darks Date: Tue, 27 Jun 2023 23:28:32 +0200 Subject: [PATCH] homepage: still WIP, but better --- app/static/css/global.css | 1 + app/static/css/homepage.css | 181 ++++++++++++++++- app/static/less/global.less | 1 + app/static/less/homepage.less | 219 ++++++++++++++++++++- app/templates/base/base.html | 2 +- app/templates/index.html | 359 +++++++++++++++++++++++++++++++++- 6 files changed, 745 insertions(+), 18 deletions(-) diff --git a/app/static/css/global.css b/app/static/css/global.css index 0a84f86..1485828 100644 --- a/app/static/css/global.css +++ b/app/static/css/global.css @@ -163,6 +163,7 @@ input[type="submit"]:focus { background: var(--links); color: var(--warn-text); border-radius: 1px; + overflow: hidden; } .skip-to-content-link:focus { transform: translateY(0%); diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css index 1684d68..589a412 100644 --- a/app/static/css/homepage.css +++ b/app/static/css/homepage.css @@ -1,26 +1,201 @@ .home-pinned-content { display: grid; grid-template-areas: 'banner news''welcome news''shout news''projects projects'; - grid-template-rows: minmax(100px,auto)repeat(minmax(200px,auto),2)minmax(100px,auto); - gap: 10px; + grid-template-rows: auto auto minmax(200px,1fr)auto; + grid-template-columns: 4fr 3fr; } .home-pinned-content > * { - border: 1px solid red; + margin: 10px; +} +.home-pinned-content > * h1 { + font-size: 18px; } .home-banner { grid-area: banner; + text-align: center; } .home-welcome { grid-area: welcome; display: flex; flex-direction: row; + flex-wrap: wrap; +} +.home-welcome h1 { + width: 100%; + margin-bottom: 0; +} +.home-welcome ul { + padding-left: 20px; } .home-news { grid-area: news; } +.home-news ul { + padding: 0; +} +.home-news li { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + border-bottom: var(--hr-border); +} +.home-news li img { + max-width: 100px; + max-height: 100px; + margin-right: 8px; +} +.home-news li h3 { + font-size: 16px; + font-weight: bold; + font-family: Cantarell; +} +.home-news li div { + font-size: 13px; +} .home-shoutbox { grid-area: shout; } .home-projects { grid-area: projects; +} +#v5shoutbox { + --shoutbox-color: #333333; + --shoutbox-border-color: rgba(0,0,0,.15); + --shoutbox-header-bg: #ececec; + --shoutbox-link-color: #ce1919; + --shoutbox-tab-activity-color: #ce1919; + --shoutbox-tab-current-color: #097ba1; + --shoutbox-message-date-color: #949494; + --shoutbox-message-author-color: #777777; +} +#v5shoutbox { + max-height: 300px; + overflow-y: scroll; + display: flex; + flex-flow: column; + font-size: 12px; + color: var(--shoutbox-color); +} +#v5shoutbox header { + height: 32px; + display: flex; + align-items: center; + background: var(--shoutbox-header-bg); + border: 1px solid var(--shoutbox-border-color); + gap: 4px; + padding: 0 4px; +} +#v5shoutbox header .grow { + flex-grow: 1; +} +#v5shoutbox a { + color: var(--shoutbox-link-color); +} +#v5shoutbox a:active, +#v5shoutbox a:hover, +#v5shoutbox a:focus { + color: var(--shoutbox-link-color); + text-decoration: underline; + outline: 0; +} +#v5shoutbox pre { + overflow: auto; + word-wrap: normal; + word-break: break-word; + white-space: pre-wrap; + margin: 0; + padding: 4px; +} +#v5shoutbox .channel-buttons button { + border: 1px solid var(--shoutbox-border-color); + border-radius: 3px; + padding: 3px 6px; +} +#v5shoutbox .channel-buttons button:nth-child(1) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; +} +#v5shoutbox .channel-buttons button:nth-child(2) { + border-radius: 0; + border-right: 0; +} +#v5shoutbox .channel-buttons button:nth-child(3) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +#v5shoutbox .channel-buttons .bg-activity { + color: var(--shoutbox-tab-activity-color); +} +#v5shoutbox .channel-buttons .current { + color: var(--shoutbox-tab-current-color); +} +#v5shoutbox .channels { + flex: 1; + overflow: auto; +} +#v5shoutbox .channels div[data-channel="\\login"] { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +#v5shoutbox .channels .login-form { + height: 30%; + width: 40%; + border: 1px solid var(--shoutbox-border-color); + padding: 0 2%; + display: flex; + flex-flow: column; + justify-content: space-evenly; +} +#v5shoutbox .channel { + overflow-x: auto; + overflow-y: scroll; + height: 100%; + display: flex; + flex-direction: column-reverse; +} +#v5shoutbox .message { + line-height: 1.5; + display: flex; + border-top: 1px solid var(--shoutbox-border-color); +} +#v5shoutbox .message .message-author { + margin-right: 6px; + font-size: 0.9em; + color: var(--shoutbox-message-author-color); + min-width: 70px; + text-align: right; + flex-shrink: 0; +} +#v5shoutbox .message .message-content { + flex-grow: 1; + margin: 0; + word-wrap: normal; + word-break: break-word; + white-space: pre-wrap; +} +#v5shoutbox .message .message-date { + color: var(--shoutbox-message-date-color); + margin-left: 5px; + font-size: 0.8em; + order: 3; + flex-shrink: 0; +} +#v5shoutbox .shoutbox-form { + height: 2.4em; +} +#v5shoutbox .shoutbox-form input[type=text] { + width: 95%; + border: 1px solid var(--shoutbox-border-color); + border-left: 0; + border-right: 0; + border-radius: 0; +} +#v5shoutbox .shoutbox-form button[type=submit] { + width: 5%; + border: 1px solid var(--shoutbox-border-color); + border-radius: 0; } \ No newline at end of file diff --git a/app/static/less/global.less b/app/static/less/global.less index b175aa0..74dac5d 100644 --- a/app/static/less/global.less +++ b/app/static/less/global.less @@ -161,6 +161,7 @@ button, .button, input[type="button"], input[type="submit"] { background: var(--links); color: var(--warn-text); border-radius: 1px; + overflow: hidden; &:focus { transform: translateY(0%); diff --git a/app/static/less/homepage.less b/app/static/less/homepage.less index 581e59e..ace4323 100644 --- a/app/static/less/homepage.less +++ b/app/static/less/homepage.less @@ -6,17 +6,22 @@ 'shout news' 'projects projects'; - grid-template-rows: minmax(100px, auto) repeat(minmax(200px, auto), 2) minmax(100px, auto); - - gap: 10px; + grid-template-rows: auto auto minmax(200px, 1fr) auto; + grid-template-columns: 4fr 3fr; & > * { - border: 1px solid red; + //border: 1px solid red; + margin: 10px; + + h1 { + font-size: 18px; + } } } .home-banner { grid-area: banner; + text-align: center; } .home-welcome { @@ -24,10 +29,49 @@ display: flex; flex-direction: row; + flex-wrap: wrap; + + h1 { + width: 100%; + margin-bottom: 0; + } + + ul { + padding-left: 20px; + } } .home-news { grid-area: news; + + ul { + padding: 0; + } + + li { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + + border-bottom: var(--hr-border); + + img { + max-width: 100px; + max-height: 100px; + margin-right: 8px; + } + + h3 { + font-size: 16px; + font-weight: bold; + font-family: Cantarell; + } + + div { + font-size: 13px; + } + } } .home-shoutbox { @@ -37,3 +81,170 @@ .home-projects { grid-area: projects; } + + + + +/* Standalone page's configuration */ + + +#v5shoutbox { + --shoutbox-color: #333333; + --shoutbox-border-color: rgba(0, 0, 0, .15); + --shoutbox-header-bg: #ececec; + --shoutbox-link-color: #ce1919; + --shoutbox-tab-activity-color: #ce1919; + --shoutbox-tab-current-color: #097ba1; + --shoutbox-message-date-color: #949494; + --shoutbox-message-author-color: #777777; +} + +/* Shoutbox-only style */ + +#v5shoutbox { + max-height: 300px; + overflow-y: scroll; + display: flex; + flex-flow: column; + font-size: 12px; + color: var(--shoutbox-color); +} + +#v5shoutbox header { + height: 32px; + display: flex; + align-items: center; + background: var(--shoutbox-header-bg); + border: 1px solid var(--shoutbox-border-color); + gap: 4px; + padding: 0 4px; +} + +#v5shoutbox header .grow { + flex-grow: 1; +} + +#v5shoutbox a { + color: var(--shoutbox-link-color); +} + +#v5shoutbox a:active, #v5shoutbox a:hover, #v5shoutbox a:focus { + color: var(--shoutbox-link-color); + text-decoration: underline; + outline: 0; +} + +#v5shoutbox pre { + overflow: auto; + word-wrap: normal; + word-break: break-word; + white-space: pre-wrap; + margin: 0; + padding: 4px; +} + +#v5shoutbox .channel-buttons button { + border: 1px solid var(--shoutbox-border-color); + border-radius: 3px; + padding: 3px 6px; +} + +#v5shoutbox .channel-buttons button:nth-child(1) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; +} +#v5shoutbox .channel-buttons button:nth-child(2) { + border-radius: 0; + border-right: 0; +} +#v5shoutbox .channel-buttons button:nth-child(3) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +#v5shoutbox .channel-buttons .bg-activity { + color: var(--shoutbox-tab-activity-color); +} +#v5shoutbox .channel-buttons .current { + color: var(--shoutbox-tab-current-color); +} + +#v5shoutbox .channels { + flex: 1; + overflow: auto; +} + +#v5shoutbox .channels div[data-channel="\\login"] { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +#v5shoutbox .channels .login-form { + height: 30%; + width: 40%; + border: 1px solid var(--shoutbox-border-color); + padding: 0 2%; + display: flex; + flex-flow: column; + justify-content: space-evenly; +} + +#v5shoutbox .channel { + overflow-x: auto; + overflow-y: scroll; + height: 100%; + display: flex; + flex-direction: column-reverse; +} + +#v5shoutbox .message { + line-height: 1.5; + display: flex; + border-top: 1px solid var(--shoutbox-border-color); +} + +#v5shoutbox .message .message-author { + margin-right: 6px; + font-size: 0.9em; + color: var(--shoutbox-message-author-color); + min-width: 70px; + text-align: right; + flex-shrink: 0; +} + +#v5shoutbox .message .message-content { + flex-grow: 1; + margin: 0; + word-wrap: normal; + word-break: break-word; + white-space: pre-wrap; +} + +#v5shoutbox .message .message-date { + color: var(--shoutbox-message-date-color); + margin-left: 5px; + font-size: 0.8em; + order: 3; + flex-shrink: 0; +} + +#v5shoutbox .shoutbox-form { + height: 2.4em; +} + +#v5shoutbox .shoutbox-form input[type=text] { + width: 95%; + border: 1px solid var(--shoutbox-border-color); + border-left: 0; + border-right: 0; + border-radius: 0; +} + +#v5shoutbox .shoutbox-form button[type=submit] { + width: 5%; + border: 1px solid var(--shoutbox-border-color); + border-radius: 0; +} diff --git a/app/templates/base/base.html b/app/templates/base/base.html index 6f72252..1c8f1ad 100644 --- a/app/templates/base/base.html +++ b/app/templates/base/base.html @@ -14,8 +14,8 @@ {% include "base/flash.html" %} -
{% block content %} +
{% endblock %} {% include "base/footer.html" %} diff --git a/app/templates/index.html b/app/templates/index.html index 95048b9..019df14 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -9,7 +9,7 @@ {% block content %}
-

Bannière (optionelle)

+

Bienvenue sur Planète Casio !

@@ -43,18 +43,357 @@

Actualitées

-

Shoutbox

-
    -
  • Inscription : dans le menu "Compte" à gauche (les comptes seront ultimement reconnectés à la version originale du site)
    • -
  • Le forum est fonctionnel, les programmes arrivent sous peu.
    • -
  • Pour toute demande particulière, vous pouvez envoyer un email à contact (at) planet-casio (dot) com.
    • -
+
+
+
#hs: Hors-sujet (mais modéré quand même).
+
+
+ Log +
+
+
+ +
+ +
GLaDOS

Nouveau message de Validuser (voir "https://www.planet-casio.com/Fr/compte/voir_profil.php?membre=Validuser") dans le topic Question (plus si) urgente (voir "https://www.planet-casio.com/Fr/forums/topic17393-1-question-plus-si-urgente.html#192740")

21:13:06
Tituya

j'ai juste raté une UE

19:04:10
Tituya

Mais en vrai s'ils regardent la compensation inter-UE même avec 0 dans la dernière matière ça me fait 11 de moyenne scientifique

19:03:59
Fcalva

Ce qui veut dire que je peux 1 - connecter mon téléphone à ma chaîne sans adapteur jack 2 - M'en servir a travers la maison, même dehors

19:00:20
Fcalva

C'est cool je peux me servir de mon ordi comme "haut parleur" bluetooth pour mon téléphone

18:59:18
Alice

@DS je t'ai vu :E

18:59:07
Tituya

donc moi quelques-unes du semestre 2. Mais ça fait une année à presque rien faire du coup

18:59:07
Tituya

souvent c'est un redoublement partiel, tu repasses que les matières que t'as pas validé

18:58:36
Darks

Heu, le semestre ^^'

18:57:58
Darks

Sinon c'est quoi, tu redouble le M2 ?

18:57:41
Darks

Bon ben, j'espère que ça passera quand même :/

18:57:27
Darks

xD

18:57:06
Tituya

Ou alors je leur rédige une RDP, c'est encore plus un miracle :E

18:42:52
Tituya

Donc on verra le jury, j'ai l'occasion de leur faire une lettre. Je vais vanter mes mérites

18:41:51
Tituya

Mon niveau pas dingue mais quand même meilleur que beaucoup de monde dans la promo

18:41:20
Tituya

Jury le 3 juillet, ils peuvent me faire passer quand même vu mon niveau en informatique

18:39:53
Tituya

C'est au cas par cas les rattrapages, il me reste encore une note à avoir mais ça relève du miracle

18:39:35
Darks

T'as pas un rattrapage ?

18:30:40
Darks

Ah merde :/

18:30:26
Tituya

Je pense que je vais poser des stores pendant très longtemps du coup :E

18:25:32
Tituya

L'UE full math évidemment. Il y avait quasiment aucune matière informatique dans ce semestre

18:25:02
Tituya

Sauf un miracle (non) je valide tout sauf une UE du semestre 2

18:24:15
Tituya

Je suis dans la merde pour mon année

18:23:27
Darks

Au lieu de faire du TCP :E

18:18:45
Darks

Tu peux très bien écrire un message "Salut ça va ? Bien passé ton WE ? J'ai une question pour toi, […]"

18:18:25
Darks

Je vois pas en quoi ne pas dire bonjour et poser une question sont liés

18:17:47
GLaDOS

Nouveau message de Jupiko (voir "https://www.planet-casio.com/Fr/compte/voir_profil.php?membre=Jupiko") dans le topic Une Mémoire externe pour la Casio FX92+ (voir "https://www.planet-casio.com/Fr/forums/topic16979-1-une-memoire-externe-pour-la-casio-fx92.html#192739")

18:16:49
Fcalva

Bizzare

17:58:21
Fcalva

Bon moi je me suis pris une erreur 500 en essayant de charger la page il y a 30mn, mais là c'est revenu

17:58:15
Shadow

J'repense au mec qui m'a fait des avances bizarres sur IRC xD

17:53:50
Shadow

Oui x)

17:53:36
Breizh

Mais si tu MP quelqu’un pour dire bonjour et attendre qu’il soit « en face » comme si c’était un appel téléphonique, c’est complètement con :E

17:53:29
Shadow

Ui

17:53:04
Breizh

Bref, y’a toujours un contexte à prendre en compte.

17:52:57
Breizh

Bah voilà :E

17:52:37
Shadow

(d'ailleurs personne ne dit rien xD)

17:51:27
Shadow

Sur les autres canaux je me co, mais je ne dit rien

17:51:23
Shadow

Perso je suis surtout connecté sur le canal général

17:51:10
Breizh

(genre si le canal c’est juste 5 bonjour et 5 au revoir tous les jours, lol)

17:51:03
Breizh

Je dis bonjour quand j’ai un truc à dire en général. Ça dépends du canal aussi.

17:50:46
Shadow

Et je dis bonjour / au revoir quand j'arrive et que je reparts xD

17:50:16
Shadow

Je suis pas co sur IRC H24 xD

17:50:02
Shadow

ben dire Bonjour c'est bien :E

17:49:52
Breizh

(pis de toute façon sur IRC je suis co H24 donc bon :E)

17:49:49
Breizh

(et oui, pour IRC, mais du coup… et alors ?)

17:49:19
Shadow

Certes

17:49:12
Shadow

Oui

17:49:08
Breizh

C’est différent :E

17:49:05
Shadow

'fin pour le coup quelqu'un qui pop sur IRC qui ne dit pas bonjour, on va juste penser qu'il s'est co de manière automatique, et qu'il n'est pas là pour parler / AFK

17:49:05
Breizh

Tu parles d’un canal public là.

17:49:01
+

Projets du moment