diff --git a/core/static/core/img/logo_no_text.png b/core/static/core/img/logo_no_text.png new file mode 100644 index 00000000..405bd009 Binary files /dev/null and b/core/static/core/img/logo_no_text.png differ diff --git a/core/static/core/js/script.js b/core/static/core/js/script.js index 671785fe..1ab7887e 100644 --- a/core/static/core/js/script.js +++ b/core/static/core/js/script.js @@ -1,5 +1,3 @@ -console.log('Guy'); - $( function() { buttons = $(".choose_file_button"); popups = $(".choose_file_widget"); diff --git a/core/static/core/navbar.scss b/core/static/core/navbar.scss new file mode 100644 index 00000000..7cdd1915 --- /dev/null +++ b/core/static/core/navbar.scss @@ -0,0 +1,400 @@ +.header { + box-sizing: border-box; + background-color: #354a5f; + box-shadow: 3px 3px 3px 0 #dfdfdf; + border-radius: 0; + width: 100%; + min-height: 75px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 10px; + gap: 10px; + + @media (max-width: 700px) { + height: auto; + } + + @media (max-width: 580px) { + justify-content: space-between; + } + + @media (max-width: 400px) { + flex-direction: column; + } + + &-logo { + display: flex; + flex-direction: row; + gap: 10px; + + @media (max-width: 607px) { + width: 100%; + justify-content: center; + } + + &-picture { + height: 100%; + width: 65px; + display: flex; + + background-position: center center; + background-size: contain; + background-repeat: no-repeat; + + @media (max-width: 580px) { + height: auto; + } + } + + &-text { + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + > span:first-child { + font-size: 1.43em; + } + + > span:last-child { + font-size: .7em; + } + } + + } + + &-lang { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 3px; + + @media (max-width: 580px) { + flex-direction: row; + } + + > form { + margin: 0; + box-sizing: border-box; + position: relative; + + > input[type=submit] { + border-radius: 0; + z-index: 10; + margin: 0; + box-sizing: border-box; + background-color: #354a5f; + width: 45px; + height: 25px; + padding: 0; + + &:hover { + background-color: #283747; + } + } + } + } + + &-disconnected { + box-sizing: border-box; + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; + + @media (max-width: 607px) { + justify-content: center; + } + + > .button { + box-sizing: border-box; + height: 35px; + background-color: transparent; + font-weight: normal; + padding: 5px 20px; + display: flex; + justify-content: center; + align-items: center; + text-transform: uppercase; + text-decoration: none; + color: white; + margin: 0; + font-size: .9em; + width: 120px; + + &:hover { + background-color: #283747; + } + } + } + + &-disconnected ~ &-lang { + @media (max-width: 662px) { + flex-direction: row; + width: 100%; + } + } + + &-connected { + box-sizing: border-box; + flex: 1; + display: flex; + flex-direction: row; + + @media (min-width: 400px) and (max-width: 1200px) { + flex-direction: column; + min-width: 100%; + justify-content: center; + align-items: center; + gap: 10px; + } + + @media (max-width: 400px) { + flex-direction: column; + width: 100%; + gap: 10px; + padding: 0 10px; + } + + > .right, + > .left { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + + @media (min-width: 400px) and (max-width: 1200px) { + width: 100%; + justify-content: space-between !important; + padding: 0 20px; + } + } + + > .right { + flex: 1; + justify-content: flex-end; + + > .user { + display: flex; + flex-direction: column; + gap: 5px; + + @media (max-width: 400px) { + width: 100%; + } + + > .options, + > .name { + > a { + color: white; + &:hover { + color: #aaa; + } + } + } + + > .name { + color: white; + max-width: 250px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + @media (max-width: 400px) { + max-width: 100%; + } + + &:hover { + color: #aaa; + } + } + + > .options { + width: 100%; + display: flex; + gap: 20px; + justify-content: flex-end; + + > a { + &:last-child { + color: #eb2f06; + + &:hover { + color: #cc2804; + } + } + } + + @media (max-width: 1200px) { + justify-content: flex-start; + } + } + } + + > .notification { + height: 100%; + width: 55px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + + > a { + color: white; + position: relative; + font-size: 25px; + + &:hover { + color: #aaa; + } + + > span { + color: white; + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; + width: 10px; + height: 10px; + padding: 5px; + background-color: #eb2f06; + border-radius: 50%; + position: absolute; + top: -50%; + right: -50%; + } + } + + > #header_notif { + box-sizing: border-box; + display: none; + position: absolute; + margin: 0; + background-color: whitesmoke; + top: calc(100% + 10px); + right: calc(50% - 30px); + width: 400px; + max-width: calc(100vw - 30px); + padding: 10px; + z-index: 100; + border-radius: 10px; + box-shadow: 3px 3px 3px 0 #dfdfdf; + + > ul { + list-style-type: none; + margin: 0 0 10px 0; + display: flex; + flex-direction: column; + gap: 10px; + max-height: 120px; + overflow-y: scroll; + + > li { + > a { + .datetime { + display: flex; + justify-content: flex-start; + gap: 10px; + font-style: italic; + font-size: .8em; + } + } + } + } + + .options { + width: 100%; + display: flex; + justify-content: space-between; + + > a { + color: black; + padding: 5px; + width: 50%; + display: flex; + justify-content: center; + text-align: center; + align-items: center; + border-radius: 5px; + + &:hover { + background-color: rgba(0, 0, 0, .2); + } + } + } + } + } + } + + > .left { + gap: 10px; + display: flex; + + @media (max-width: 1200px) { + flex-direction: row-reverse; + } + + @media (max-width: 550px) { + flex-direction: column-reverse; + } + + > form { + margin: 0; + width: 200px; + + @media (max-width: 550px) { + width: 100%; + } + + > input[type=text] { + box-sizing: border-box; + max-width: 100%; + width: 100%; + height: 35px; + border-radius: 5px; + font-size: .9em; + margin: 0; + background-color: #283747; + padding: 0 10px; + color: white; + } + } + } + } + + &-connected ~ &-lang { + @media (max-width: 1200px) { + flex-direction: row; + width: 100%; + } + } +} + +.bars { + list-style-type: none; + min-width: 120px; + margin: 0; + padding: 0; + + @media(max-width: 1200px) { + display: flex; + flex-direction: row; + gap: 20px; + } + + > li > a { + color: white; + + &:hover { + color: #aaa; + } + + > span { + margin-left: 5px; + } + } +} \ No newline at end of file diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja index b3b35841..010bdb30 100644 --- a/core/templates/core/base.jinja +++ b/core/templates/core/base.jinja @@ -2,27 +2,31 @@ {% block head %} - {% block title %}{% trans %}Welcome!{% endtrans %}{% endblock %} - Association des Étudiants UTBM - - - - - - - {% block jquery_css %} - {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #} - - {% endblock %} - - - + {% block title %}{% trans %}Welcome!{% endtrans %}{% endblock %} - Association des Étudiants UTBM + + + + + + + - - - - - {% block additional_css %}{% endblock %} - {% block additional_js %}{% endblock %} + {% block jquery_css %} + {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #} + + {% endblock %} + + + + + + + + + + + {% block additional_css %}{% endblock %} + {% block additional_js %}{% endblock %} {% endblock %} @@ -33,129 +37,137 @@ {% csrf_token %} {% block header %} - {% if not popup %} -
-
- {% for language in LANGUAGES %} -
{% csrf_token %} - - - -
- {% endfor %} -
- - {% if not user.is_authenticated %} - + {% if not popup %} +
+ + {% if not user.is_authenticated %} +
+ {% trans %}Login{% endtrans %} + {% trans %}Register{% endtrans %} +
+ {% else %} +
+
+ + +
+
+
+ {{ user.get_display_name() }} +
+ {% trans %}Tools{% endtrans %} + {% trans %}Logout{% endtrans %} +
+
+
+ + + + {% if user.notifications.filter(viewed=False).count() < 100 %} + {{ user.notifications.filter(viewed=False).count() }} + {% else %} +   + {% endif %} + + + +
+
+
+ {% endif %} +
+ {% for language in LANGUAGES %} +
+ {% csrf_token %} + + + +
+ {% endfor %} +
+
+ +
+ {% block info_boxes %} + {% set sith = get_sith() %} + {% if sith.alert_msg %} +
+ {{ sith.alert_msg|markdown }} +
+ {% endif %} + {% if sith.info_msg %} +
+ {{ sith.info_msg|markdown }} +
+ {% endif %} + {% endblock %} +
+ {% else %} -
- - {% endcache %} - - -
+
{{ user.get_display_name() }}
{% endif %} -
- -
- {% block info_boxes %} - {% set sith = get_sith() %} - {% if sith.alert_msg %} -
- {{ sith.alert_msg|markdown }} -
- {% endif %} - {% if sith.info_msg %} -
- {{ sith.info_msg|markdown }} -
- {% endif %} - {% endblock %} -
- - {% else %}{# if not popup #} -
{{ user.get_display_name() }}
- {% endif %} - {% endblock %}