From e5649d82ba7cb47eb956f09d13bb5e09feedd489 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Fri, 23 Jul 2021 19:28:11 +0100 Subject: [PATCH] [CSS][TWIG] Timeline navigation is now a part of the left panel, this way more items could be displayed at a time. Left panel styling WIP. Signed-off-by: Eliseu Amaro --- public/assets/css/base.css | 67 +++------- public/assets/css/left/left.css | 78 ++++++++++-- public/assets/css/right/right.css | 28 +++-- templates/network/public.html.twig | 41 +----- templates/sidepanel/left/left.html.twig | 159 +++++++++++++++--------- 5 files changed, 205 insertions(+), 168 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 0d377509b6..5478554449 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -69,6 +69,7 @@ p { font-weight: 400; letter-spacing: -0.30px; word-spacing: -0.10px; + margin-bottom: var(--small-size) !important; text-transform: none; } @@ -101,16 +102,16 @@ a:visited { a:focus, a:hover { border-radius: var(--unit-size); - padding: 0 var(--unit-size) 0 var(--unit-size); - background: var(--white); + padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size); + background: var(--white) !important; color: var(--bg1) !important; - transition: all 0.8s ease; + transition: all 0.4s ease; } #instance a:focus svg, #instance a:hover svg { fill: var(--bg1); - transition: all 0.8s ease; + transition: all 0.4s ease; } summary:hover > *, @@ -118,16 +119,14 @@ summary:focus > * { border-radius: var(--unit-size); background: var(--white); fill: var(--bg1); - transition: all 0.8s ease; + transition: all 0.4s ease; } hr { all: unset; display: block; - height: 1px; - background-image: linear-gradient(var(--bg1), var(--bg2)); - margin-top: var(--unit-size); - margin-bottom: var(--main-size); + height: 2px; + background-image: linear-gradient(to right, var(--bg1), transparent 90%); } /* DEFAULTS */ @@ -195,48 +194,26 @@ html { /* THE FOCUSED (middle) DIV */ .content { + margin: var(--main-size); + margin-left: calc(2 * var(--main-size)); display: flex; flex-direction: column; - width: calc(3 * (100%/5)); -} - -/* NAVIGATION */ -.navigation { - display: flex; - flex-direction: column; - width: 100%; - text-align: center; -} -.navigation nav { - padding: var(--small-size); -} -.navigation a { - font-family: var(--display-font); - font-size: var(--main-size); - color: var(--accent-blue); -} -.active { - color: var(--white) !important; -} -.main-nav { - background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 30%); -} -.sec-nav { - background: radial-gradient(ellipse at 50% 100%, var(--bg1), transparent 50%); -} -.sec-nav ul { - display: flex; - justify-content: space-around; -} -.sec-nav a { - font-size: var(--medium-size); + width: calc(3 * (100% / 5)); } /* NOTES */ +.h-feed, .notes { margin-top: var(--main-size); } +.h-feed, +.notes hr { + margin-top: var(--unit-size); + margin-bottom: var(--main-size); +} + +.h-entry, .note { background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); @@ -296,12 +273,8 @@ figcaption a:link { } /* ANIMATIONS */ -.content { - animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); -} - details[open] > div { - animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); + animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); } @keyframes fadeIn { diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 71a7e2e8ea..d4899c46de 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -17,6 +17,11 @@ height: auto; } +#left-container[open] { + height: calc(100vh - (3 * var(--small-size) + var(--main-size))); + width: calc(100vw / 5); +} + #left-container[open] > div { opacity: 100%; } @@ -25,17 +30,72 @@ tab-index: 0; } -#left-container[open] { - width: calc(100vw / 4); - border-right: solid 1px var(--bg2); - margin-right: var(--main-size); -} - -#left-container[open] > #left-panel { +#left-panel { position: fixed; display: flex; flex-direction: column; - - width: 100%; + font-size: var(--main-size); + width: inherit; + height: inherit; padding: var(--small-size); + box-sizing: border-box; +} + +/* PROFILE */ +.profile-nav { + + font-family: var(--display-font); +} + +.profile { + width: 100%; + margin-bottom: var(--main-size); + + background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; + border-radius: var(--unit-size); + + padding: var(--unit-size); + box-sizing: border-box; +} + +.profile a:focus, +.profile a:hover { + all: unset; + color: var(--white) !important; +} + +.footer { + font-size: var(--small-size); + margin-top: auto; +} + +/* TIMELINE NAVIGATION / PLUGINS */ +.timeline-nav { + margin-top: var(--main-size); + display: flex; + flex-direction: column; +} + +.timeline-nav a { + color: var(--white); +} + +.timeline-nav .active { + color: var(--white); +} + +.main-nav ul { + display: flex; + flex-direction: column; +} + +.sec-nav a { + font-size: var(--medium-size); +} + +.sec-nav ul { + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 3320eca569..7bb6d352bd 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -17,27 +17,29 @@ } #right-container[open] { - width: calc(100vw / 4); - border-left: solid 1px var(--bg2); - margin-left: var(--main-size); + width: calc(100vw / 5); } #right-panel { - position: fixed; - display: flex; - flex-direction: column; + font-size: var(--main-size); + width: inherit; + height: inherit; + padding: var(--small-size); + box-sizing: border-box; +} - width: 100%; +.create-notice { + border-radius: var(--unit-size); padding: var(--small-size); } -input[type="file"] { - font-family: var(--display-font); +.custom-file-upload { + display: inline-block; + padding: var(--small-size) var(--medium-size); } -.custom-file-upload { - border: 1px solid #ccc; - display: inline-block; - padding: 6px 12px; +#post_attachments { + font-family: var(--display-font); + font-size: var(--medium-size); cursor: pointer; } \ No newline at end of file diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig index 719dbdcf0b..38a53e7c90 100644 --- a/templates/network/public.html.twig +++ b/templates/network/public.html.twig @@ -23,46 +23,9 @@
-
- - - -
- {# Backwards compatibility with hAtom 0.1 #} -
-
+
+
{% if notes is defined and notes is not empty %} {% for conversation in notes %} {% include '/note/view.html.twig' with {'note': conversation['note'], 'have_user': have_user, 'replies': conversation['replies']} only %} diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index d41e8a1d5b..a3a43f932c 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -1,66 +1,105 @@ -{% if app.user %} -
-
-
-
- {% for extra in profile_extras %} - {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %} - {% endfor %} - - Your avatar. - - -
- {{ user_nickname }} -
- {% if user_tags %} - {% for tag in user_tags %} - #{{ tag }} - {% endfor %} - {% else %} - {{ '(No tags)' | trans }} - {% endif %} -
-
- {{ user_followers }} {{ 'Followers' | trans }} - {{ user_followed }} {{ 'Followed' | trans }} -
-
- -
- Messages - Replies - {% for link in handle_event('InsertLeftPanelLink', user_nickname) %} - {{ link | raw }} +
+
+ + {% if app.user %} +
+ {% for extra in profile_extras %} + {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %} {% endfor %} - Settings - Logout + + Your avatar. + + +
+ {{ user_nickname }} +
+ {% if user_tags %} + {% for tag in user_tags %} + #{{ tag }} + {% endfor %} + {% else %} + {{ '(No tags)' | trans }} + {% endif %} +
+
+ {{ user_followers }} {{ 'Followers' | trans }} + {{ user_followed }} {{ 'Followed' | trans }} +
+
+
-
- FAQ - TOS - Privacy - Source - Version + +
    +
  • + Messages +
    • +
  • + Replies +
    • + {% for link in handle_event('InsertLeftPanelLink', user_nickname) %} +
  • {{ link | raw }}
    • + {% endfor %} +
  • + Settings +
    • +
  • + Logout +
    • +
+ {% else %} +
+
+ {% endif %} + +
+ Timeline +
+ +
+
-{% else %} -
-
-
- Login - Register -
-
- FAQ - TOS - Privacy - Source - Version -
-
+ +
+ FAQ + TOS + Privacy + Source + Version
-{% endif %} +