From ba69ec2ffc019b8745a0f087d04581eb2a6690e8 Mon Sep 17 00:00:00 2001 From: cuom1999 Date: Thu, 2 Jun 2022 17:09:24 -0500 Subject: [PATCH] Change UI --- resources/blog.scss | 156 +++++++++--------- resources/problem.scss | 2 +- templates/organization/org-right-sidebar.html | 22 ++- templates/three-column-content.html | 7 +- 4 files changed, 96 insertions(+), 91 deletions(-) diff --git a/resources/blog.scss b/resources/blog.scss index 5db8d5f..95e313c 100644 --- a/resources/blog.scss +++ b/resources/blog.scss @@ -39,6 +39,8 @@ .left-sidebar-item.active { color: green; + font-weight: bold; + background-color: lightgreen; .sidebar-icon { color: green; } @@ -101,67 +103,6 @@ color: #555; } -@media (max-width: 799px) { - .left-sidebar-header { - display: none; - } - .left-sidebar-item { - display: inline-block; - flex: 1; - } - .left-sidebar { - text-align: right; - margin-bottom: 1em; - border-radius: 7px; - display: flex; - } -} -@media (min-width: 800px) { - .middle-content, .blog-sidebar, .right-sidebar { - display: block !important; - } - - .middle-content { - margin-right: 1em !important; - } - - #mobile.tabs { - display: none; - } - - #three-col-container { - display: flex; - } - - .middle-content { - max-width: 71.5%; - margin-left: 10%; - } - - .blog-sidebar, .right-sidebar { - width: 18%; - } - - .left-sidebar { - width: 8%; - margin-right: 1em; - position: fixed; - height: 100%; - margin-top: -4em; - padding-top: 4em; - border-right: 3px solid black; - } - - .feed-table { - font-size: small; - } - - .blog-box { - border-left: 2px solid black; - border-right: 2px solid black; - border-radius: 8px; - } -} #mobile.tabs { margin: 0; @@ -194,9 +135,9 @@ } .blog-box { - border-bottom: 1px solid black; - border-top: 2px solid black; - margin-bottom: 1em; + border-bottom: 1.4px solid lightgray; + border-top: 1.4px solid lightgray; + margin-bottom: 1.5em; width: 90%; padding: 1em 1.25em 0.5em 1.25em; background-color: white; @@ -230,22 +171,21 @@ color: gray; } -.left-sidebar { - background-color: #f0f1f3; - color: #616161; -} - .left-sidebar-item { - padding: 1em 0.5em; - text-align: center; + padding: 0.8em 0.2em 0.8em 1em; + .sidebar-icon { + width: 1.2em; + display: inline-block; + } } .left-sidebar-item:hover { - background-color: lightgray; + background-color: #e3e3e3; cursor: pointer; } +.left-sidebar-item.active:hover { + background-color: lightgreen; +} .sidebar-icon { - font-size: x-large; - margin-bottom: 0.1em; color: black; } .left-sidebar-header { @@ -257,4 +197,72 @@ } .feed-table { margin: 0; +} +.pre-expand-blog { + background-image: -webkit-linear-gradient(bottom, gray, lightgray 3%, transparent 8%, transparent 100%); + padding-bottom: 0; +} +@media (max-width: 799px) { + .left-sidebar-header { + display: none; + } + .left-sidebar-item { + display: inline-block; + flex: 1; + border-radius: 8px; + } + .left-sidebar { + text-align: center; + margin-bottom: 1em; + border-radius: 7px; + display: flex; + } +} +@media (min-width: 800px) { + .middle-content, .blog-sidebar, .right-sidebar { + display: block !important; + } + + .middle-content { + margin-right: 1em !important; + } + + #mobile.tabs { + display: none; + } + + #three-col-container { + display: flex; + } + + .middle-content { + max-width: 65%; + margin-left: 13%; + } + + .blog-sidebar, .right-sidebar { + width: 20%; + } + + .left-sidebar { + width: 11%; + position: fixed; + height: 100%; + margin-top: -4em; + padding-top: 4em; + } + + .left-sidebar-item { + border-radius: 0 2em 2em 0; + } + + .feed-table { + font-size: small; + } + + .blog-box { + border-left: 1.4px solid lightgray; + border-right: 1.4px solid lightgray; + border-radius: 8px; + } } \ No newline at end of file diff --git a/resources/problem.scss b/resources/problem.scss index 63d4a55..804ca69 100644 --- a/resources/problem.scss +++ b/resources/problem.scss @@ -318,7 +318,7 @@ ul.problem-list { } .problem-feed-option-item.active { - background: goldenrod; + background: lightblue; color: darkblue; } diff --git a/templates/organization/org-right-sidebar.html b/templates/organization/org-right-sidebar.html index bd5c572..496115b 100644 --- a/templates/organization/org-right-sidebar.html +++ b/templates/organization/org-right-sidebar.html @@ -2,18 +2,6 @@ {% if (is_member or can_edit) %} {% include 'contests-countdown.html' %} {% endif %} - {% if is_member or can_edit %} -
-

{{ _('About') }}

-
-
- {% cache 3600 'organization_html' organization.id MATH_ENGINE %} - {{ organization.about|markdown('organization-about', MATH_ENGINE)|reference|str|safe }} - {% endcache %} -
-
-
- {% endif %} {% if can_edit or is_member %} +
+

{{ _('About') }}

+
+
+ {% cache 3600 'organization_html' organization.id MATH_ENGINE %} + {{ organization.about|markdown('organization-about', MATH_ENGINE)|reference|str|safe }} + {% endcache %} +
+
+
{% endif %} {% include 'top-users.html' %} \ No newline at end of file diff --git a/templates/three-column-content.html b/templates/three-column-content.html index cb6825c..4e54d12 100644 --- a/templates/three-column-content.html +++ b/templates/three-column-content.html @@ -31,8 +31,7 @@ }) $('.blog-description').each(function() { if ($(this).prop('scrollHeight') > $(this).height() ) { - $(this).parent().css('background-image', '-webkit-linear-gradient(bottom, gray, lightgray 3%, transparent 8%, transparent 100%)'); - $(this).parent().css('padding-bottom', '0'); + $(this).parent().addClass('pre-expand-blog'); $(this).css('cursor', 'pointer'); } }); @@ -43,8 +42,8 @@ {% macro make_tab_item(name, fa, url, text) %}
-
- {{ text }} + + {{ text }}
{% endmacro %}