improve mobile layout

ephios-dev · Feb 5, 2023 · 9d77add · 9d77add
1 parent 302a25c
commit 9d77add
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git a/ephios/core/calendar.py b/ephios/core/calendar.py
@@ -41,4 +41,4 @@ def formatday(self, day, weekday):
         return self.day_cell("noday", "&nbsp;")
 
     def day_cell(self, cssclass, body):
-        return f'<td class="calendar-row-height p-1 {cssclass}">{body}</td>'
+        return f'<td class="calendar-row-height p-0 pe-1 p-lg-1 {cssclass}">{body}</td>'
diff --git a/ephios/core/templates/core/event_detail.html b/ephios/core/templates/core/event_detail.html
@@ -92,7 +92,7 @@ <h1 class="card-title fw-bold fs-1">
                 {{ event.title }}
             </h1>
             <h5 class="card-subtitle mb-2 text-muted fw-bolder lh-base">
-                <span class="me-1 badge badge-{{ event.type.pk }}-color">{{ event.type }}</span>
+                <span class="me-1 badge eventtype-{{ event.type.pk }}-color">{{ event.type }}</span>
                 <span class="text-muted me-1 d-inline-block">
                     <i class="fas fa-map-marker-alt"></i>
                                 {{ event.location }}

diff --git a/ephios/core/templates/core/event_list.html b/ephios/core/templates/core/event_list.html
@@ -73,11 +73,28 @@ <h1>{% translate "Events" %}
             </div>
         </form>
         {% if mode == "calendar" %}
-            <div class="d-flex justify-content-between order-1 gap-3 mb-3">
+            <div class="d-flex order-1 gap-3 mb-3">
                 <a class="btn btn-secondary"
                    href="?{% param_replace date=prev_month_first|date:"Y-m-d" %}"
                 ><i class="fas fa-arrow-left"></i> {{ prev_month_first|date:"F Y" }}</a>
-                <a class="btn btn-secondary"
+                {% if perms.core.add_event %}
+                    <div class="dropdown">
+                        <button class="btn btn-primary dropdown-toggle d-none d-md-inline-block" type="button" id="eventCreateButton"
+                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="fa fa-plus"></span>
+                            {% translate "Add event" %}
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="eventCreateButton">
+                            {% for eventtype in eventtypes %}
+                                <a class="dropdown-item" href="{% url "core:event_create" eventtype.pk %}">
+                                    {% blocktranslate with title=eventtype.title trimmed %}
+                                        Add {{ title }}
+                                    {% endblocktranslate %}</a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+                <a class="btn btn-secondary ms-auto"
                    href="?{% param_replace date=next_month_first|date:"Y-m-d" %}"
                 >{{ next_month_first|date:"F Y" }} <i class="fas fa-arrow-right"></i></a>
             </div>

diff --git a/ephios/core/templates/core/fragments/calendar_day.html b/ephios/core/templates/core/fragments/calendar_day.html
@@ -1,12 +1,12 @@
-<div class="text-center">
+<div class="text-center p-1">
     <span {% if today %}class="badge bg-primary rounded-circle fs-6"{% endif %}>{{ day }}</span>
 </div>
 <div>
     {% for shift in shifts %}
-        <a href="{{ shift.event.get_absolute_url }}" class="text-decoration-none" title="{{ shift.event.type }}: {{ shift.event.title }}">
-            <div class="w-100 d-inline-block text-truncate">
+        <a href="{{ shift.event.get_absolute_url }}" class="text-decoration-none p-0" title="{{ shift.event.type }}: {{ shift.event.title }}">
+            <div class="w-100 d-inline-block calendar-truncate calendar-shift eventtype-{{ shift.event.type.pk }}-color rounded">
                 <span class="eventtype-indicator eventtype-{{ shift.event.type.pk }}-color"></span>
-                <small>{{ shift.start_time|time }}</small> {{ shift.event.title }}
+                <small class="d-none d-lg-inline-block">{{ shift.start_time|time }}</small> <span class="ps-1 ps-lg-0">{{ shift.event.title }}</span>
             </div>
         </a>
     {% endfor %}

diff --git a/ephios/static/ephios/scss/ephios_custom.scss b/ephios/static/ephios/scss/ephios_custom.scss
@@ -207,11 +207,28 @@ a.badge {
   white-space: nowrap;
 }
 
-//calendar eventtype indicator
-.eventtype-indicator {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  background-clip: padding-box;
-  border-radius: 50%;
-}
+.calendar-shift {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap
+}
+
+@media (min-width: 992px) {
+  //calendar eventtype indicator
+  .eventtype-indicator {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background-clip: padding-box;
+    border-radius: 50%;
+  }
+
+  .calendar-shift {
+    background-color: $gray-200 !important;
+    color: $gray-900 !important;
+  }
+
+  .calendar-truncate {
+    text-overflow: ellipsis;
+  }
+}