scss-ify eboutic.css

club/templates/club/club_detail.jinja

@@ -26,10 +26,9 @@
     {% if club.logo %}
       <div class="club_logo"><img src="{{ club.logo.url }}" alt="{{ club.name }}"></div>
     {% endif %}
+    <h3>{{ club.name }}</h3>
     {% if page_revision %}
       {{ page_revision|markdown }}
-    {% else %}
-      <h3>{{ club.name }}</h3>
     {% endif %}
   </div>
 {% endblock %}

com/static/com/css/news-list.scss

@@ -3,6 +3,7 @@
 
 #news {
   display: flex;
+  gap: 1em;
 
   @media (max-width: 800px) {
     flex-direction: column;
@@ -26,12 +27,14 @@
   }
 
   h3 {
-    background: $second-color;
-    box-shadow: $shadow-color 1px 1px 1px;
-    padding: 0.4em;
+    --box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 3px 7px 2px;
+    background: lighten($second-color, 5%);
+    box-shadow: var(--box-shadow);
+    padding: .75rem;
     margin: 0 0 0.5em 0;
     text-transform: uppercase;
     font-size: 17px;
+    border-radius: 10px;
 
     &:not(:first-of-type) {
       margin: 2em 0 1em 0;
@@ -39,12 +42,11 @@
 
     .feed {
       float: right;
-      color: #f26522;
+      color: #e25512;
     }
   }
 
   @media screen and (max-width: $small-devices) {
-
     #left_column,
     #right_column {
       flex: 100%;
@@ -57,6 +59,7 @@
     max-height: 600px;
     overflow-y: scroll;
     overflow-x: clip;
+    margin-top: 1em;
 
     #load-more-news-button {
       text-align: center;
@@ -76,15 +79,11 @@
     font-size: 70%;
     margin-bottom: 1em;
 
-    h3 {
-      margin-bottom: 0;
-    }
-
     #links_content {
       overflow: auto;
       box-shadow: $shadow-color 1px 1px 1px;
       min-height: 20em;
-      padding-bottom: 1em;
+      padding: 1em;
 
       h4 {
         margin-left: 5px;
@@ -121,6 +120,8 @@
     }
 
     #birthdays_content {
+      box-shadow: $shadow-color 1px 1px 1px;
+      padding: 1em;
       ul.birthdays_year {
         margin: 0;
         list-style-type: none;
@@ -135,8 +136,7 @@
         }
 
         ul {
-          margin: 0;
-          margin-left: 1em;
+          margin: .5em 0 0 1em;
           list-style-type: square;
           list-style-position: inside;
           font-weight: normal;
@@ -150,9 +150,13 @@
   /* EVENTS TODAY AND NEXT FEW DAYS */
   .news_events_group {
     box-shadow: $shadow-color 1px 1px 1px;
-    margin-left: 1em;
+    margin-left: 0;
     margin-bottom: 0.5em;
 
+    @media screen and (max-width: $small-devices) {
+      margin-left: 3px;
+    }
+
     .news_events_group_date {
       display: table-cell;
       padding: 0.6em;

com/templates/com/news_list.jinja

@@ -23,7 +23,7 @@
         <a target="#" href="{{ url("com:news_feed") }}"><i class="fa fa-rss feed"></i></a>
       </h3>
       {% if user.is_authenticated and (user.is_com_admin or user.memberships.board().ongoing().exists()) %}
-        <a class="btn btn-blue margin-bottom" href="{{ url("com:news_new") }}">
+        <a class="btn btn-blue" href="{{ url("com:news_new") }}">
           <i class="fa fa-plus"></i>
           {% trans %}Create news{% endtrans %}
         </a>

core/static/core/style.scss

@@ -271,7 +271,7 @@ body {
 
   /*--------------------------------CONTENT------------------------------*/
   #content {
-    padding: 1em 1%;
+    padding: 1.5em 3%;
     box-shadow: $shadow-color 0 5px 10px;
     background: $white-color;
     overflow: auto;

core/templates/core/fragment/user_visibility.jinja

@@ -18,7 +18,7 @@
     <span class="helptext">{{ form.is_viewable.help_text }}</span>
     {{ form.is_viewable.errors }}
   </fieldset>
-  <fieldset class="form-group" x-show="!isViewable">
+  <fieldset class="form-group" x-show="!isViewable" x-transition x-cloak>
     {{ form.whitelisted_users.as_field_group() }}
   </fieldset>
   <fieldset class="form-group">

eboutic/static/eboutic/css/eboutic.css

@@ -1,163 +0,0 @@
-#eboutic {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: flex-start;
-  column-gap: 20px;
-  margin: 0 20px 20px;
-}
-
-#eboutic-title {
-  margin-left: 20px;
-}
-
-#eboutic h3 {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-#basket {
-  min-width: 300px;
-  border-radius: 8px;
-  box-shadow:
-    rgb(60 64 67 / 30%) 0 1px 3px 0,
-    rgb(60 64 67 / 15%) 0 4px 8px 3px;
-  padding: 10px;
-}
-
-#basket h3 {
-  margin-top: 0;
-}
-
-@media screen and (max-width: 765px) {
-  #eboutic {
-    flex-direction: column-reverse;
-    align-items: center;
-    margin: 10px;
-    row-gap: 20px;
-  }
-  #eboutic-title {
-    margin-bottom: 20px;
-    margin-top: 4px;
-  }
-  #basket {
-    width: -webkit-fill-available;
-  }
-}
-
-#eboutic .item-list {
-  margin-left: 0;
-  list-style: none;
-}
-
-#eboutic .item-list li {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-#eboutic .item-row {
-  gap: 10px;
-}
-
-#eboutic .item-name {
-  word-break: break-word;
-  width: 100%;
-  line-height: 100%;
-  white-space: normal;
-}
-
-#eboutic .fa-plus,
-#eboutic .fa-minus {
-  cursor: pointer;
-  background-color: #354a5f;
-  color: white;
-  border-radius: 50%;
-  padding: 5px;
-  font-size: 10px;
-  line-height: 10px;
-  width: 10px;
-  text-align: center;
-}
-
-#eboutic .item-quantity {
-  min-width: 65px;
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-  gap: 5px;
-}
-
-#eboutic .item-price {
-  min-width: 65px;
-  text-align: right;
-}
-
-/*  CSS du catalogue  */
-
-#eboutic #catalog {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  row-gap: 30px;
-}
-
-#eboutic .category-header {
-  margin-bottom: 15px;
-}
-
-#eboutic .product-group {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 15px;
-  row-gap: 15px;
-}
-
-#eboutic .card.selected::after {
-  content: "🛒";
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  padding: 5px;
-  border-radius: 50%;
-  box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
-  background-color: white;
-  width: 20px;
-  height: 20px;
-  font-size: 16px;
-  line-height: 20px;
-}
-
-#eboutic .catalog-buttons {
-  display: flex;
-  justify-content: center;
-  column-gap: 30px;
-  margin: 30px 0 0;
-}
-
-#eboutic input {
-  all: unset;
-}
-
-#eboutic .catalog-buttons button {
-  min-width: 60px;
-}
-
-#eboutic .catalog-buttons form {
-  margin: 0;
-}
-
-@media screen and (max-width: 765px) {
-  #eboutic #catalog {
-    row-gap: 15px;
-    width: 100%;
-  }
-
-  #eboutic section {
-    text-align: center;
-  }
-
-  #eboutic .product-group {
-    justify-content: space-around;
-    flex-direction: column;
-  }
-}

eboutic/static/eboutic/css/eboutic.scss

@@ -0,0 +1,162 @@
+#eboutic-title {
+  margin-left: 20px;
+}
+
+#eboutic {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  column-gap: 20px;
+  margin: 0 20px 20px;
+
+  h3 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  #basket {
+    --box-shadow:
+    rgb(60 64 67 / 30%) 0 1px 3px 0,
+    rgb(60 64 67 / 15%) 0 4px 8px 3px;
+    min-width: 300px;
+    border-radius: 8px;
+    box-shadow: var(--box-shadow);
+    padding: 10px;
+    h3 {
+      margin-top: 0;
+    }
+  }
+
+  @media screen and (max-width: 765px) {
+    flex-direction: column-reverse;
+    align-items: center;
+    margin: 10px;
+    row-gap: 20px;
+
+    #eboutic-title {
+      margin-bottom: 20px;
+      margin-top: 4px;
+    }
+    #basket {
+      width: -webkit-fill-available;
+    }
+  }
+
+  .item-list {
+    margin-left: 0;
+    list-style: none;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+  }
+
+  .item-row {
+    gap: 10px;
+  }
+
+  .item-name {
+    word-break: break-word;
+    width: 100%;
+    line-height: 100%;
+    white-space: normal;
+  }
+
+  .fa-plus,
+  .fa-minus {
+    cursor: pointer;
+    background-color: #354a5f;
+    color: white;
+    border-radius: 50%;
+    padding: 5px;
+    font-size: 10px;
+    line-height: 10px;
+    width: 10px;
+    text-align: center;
+  }
+
+  .item-quantity {
+    min-width: 65px;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    gap: 5px;
+  }
+
+  .item-price {
+    min-width: 65px;
+    text-align: right;
+  }
+
+/*  CSS du catalogue  */
+
+  #catalog {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    row-gap: 30px;
+  }
+
+  .category-header {
+    margin-bottom: 15px;
+  }
+
+  .product-group {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 15px;
+    row-gap: 15px;
+  }
+
+  .card.selected::after {
+    --box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
+    content: "🛒";
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    padding: 5px;
+    border-radius: 50%;
+    box-shadow: var(--box-shadow);
+    background-color: white;
+    width: 20px;
+    height: 20px;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  input {
+    all: unset;
+  }
+  .catalog-buttons {
+    display: flex;
+    justify-content: center;
+    column-gap: 30px;
+    margin: 30px 0 0;
+
+    button {
+      min-width: 60px;
+    }
+    form {
+      margin: 0;
+    }
+  }
+
+
+  @media screen and (max-width: 765px) {
+    #catalog {
+      row-gap: 15px;
+      width: 100%;
+    }
+
+    section {
+      text-align: center;
+    }
+
+    .product-group {
+      justify-content: space-around;
+      flex-direction: column;
+    }
+  }
+}

eboutic/templates/eboutic/eboutic_main.jinja

@@ -15,7 +15,7 @@
 {% endblock %}
 
 {% block additional_css %}
-  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
+  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.scss") }}">
   <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 
@@ -170,8 +170,6 @@
         {% for category, items in priority_groups.list|groupby('category') %}
           {% if items|count > 0 %}
             <section>
-                            {# I would have wholeheartedly directly used the header element instead
-                            but it has already been made messy in core/style.scss #}
               <div class="category-header">
                 <h3>{{ category }}</h3>
                 {% if items[0].category_comment %}