[Fix]: Makes the recent logs more pretty

WIP #51
finnito · Aug 28, 2020 · df5a248 · df5a248
1 parent 394c89b
commit df5a248
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 19 deletions.
diff --git a/addons/adventure_log/finnito/adventurelog-theme/resources/css/theme.css b/addons/adventure_log/finnito/adventurelog-theme/resources/css/theme.css
@@ -60,9 +60,9 @@ h6 {
   font-size: 1em;
 }
 
-p {
+/*p {
   margin-top: 0;
-}
+}*/
 
 li h4 {
   margin-bottom: 0;
@@ -160,7 +160,7 @@ input[type="button"] {
   color: #f9f9f9;
   border-radius: 0.25rem;
   border: none;
-  cursor: pointer;  
+  cursor: pointer;
   transition: all 150ms;
 }
 
@@ -211,11 +211,17 @@ fieldset {
   text-decoration: none;
   font-style: normal;
   font-weight: 300;
+  transition: all 150ms;
+}
+
+.flag {
+  opacity: 0.5;
 }
 
 .flag:active,
 .flag:hover {
   color: #ff7979;
+  opacity: 1;
 }
 
 .heading-anchor {
@@ -366,6 +372,14 @@ ul.logs li a {
   flex-wrap: nowrap;
 }
 
+.flex.center {
+  align-items: center;
+}
+
+.flex .grow {
+  flex-grow: 2;
+}
+
 .flex span {
   font-style: italic;
 }
@@ -501,6 +515,31 @@ footer hr {
   margin-bottom: 1.5rem;
 }
 
+.icon {
+  font-size: 2rem;
+  background-color: white;
+  display: inline-block;
+  padding: 0.5rem;
+  border-radius: 100%;
+  height: 2rem;
+  width: 2rem;
+  line-height: 1;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  margin-right: 0.75rem;
+}
+
+.icon.hut span {
+  margin-left: -3px;
+}
+
+.icon.campsite span {
+  margin-left: -1px;
+}
+
+.icon span {
+  font-style: normal;
+}
+
 @media (min-width: 375px) {
   .hamburger p {
     display: block;

diff --git a/addons/adventure_log/finnito/adventurelog-theme/resources/views/layouts/default.twig b/addons/adventure_log/finnito/adventurelog-theme/resources/views/layouts/default.twig
@@ -180,23 +180,29 @@
                     <ul class="logs">
                     {% for log in logs %}
                         <li>
-                            <a href="/places/{{ log.related_hut.place_slug }}/{{ log.related_hut.name_slug }}/">
-                                <div>
-                                    <span class="muted">
-                                        {{ log.log_date.format('D d F, Y') }}
-                                        {% if not (log.name == "") %} by {{ log.name }}{% endif %}
-                                    </span>
+                            <div class="flex nowrap center">
+                                {% if log.related_hut.place_type == "hut" %}
+                                    <div class="icon hut"><span>🏡</span></div>
+                                {% else %}
+                                    <div class="icon campsite"><span>🏕</span></div>
+                                {% endif %}
+                                <div class="grow">
+                                    <a href="/places/{{ log.related_hut.place_slug }}/{{ log.related_hut.name_slug }}/">
+                                        <span class="strong">{{ log.related_hut.name }}</span>
+                                        <small class="muted"> > {{ log.related_hut.place }}</small>
+                                    </a>
+                                    <div class="flex nowrap">
+                                        <a href="/places/{{ log.related_hut.place_slug }}/{{ log.related_hut.name_slug }}/">
+                                            <span class="muted">
+                                                {{ log.log_date.format('D d F, Y') }}
+                                                {% if not (log.name == "") %} by {{ log.name }}{% endif %}
+                                            </span>
+                                        </a>
+                                        <span><a class="flag" href="/flag/log/{{ log.id }}">🔸 Flag as Spam</a></span>
+                                    </div>
                                 </div>
-                                <div>
-                                    <span class="strong">{{ log.related_hut.name }}</span>
-                                    <small class="muted"> > {{ log.related_hut.place }}</small>
-                                </div>
-
-                                <p>
-                                    <span>{{ log.log }}</span></br>
-                                    <span><a class="flag" href="/flag/log/{{ log.id }}">🔸 Flag as Spam</a></span>
-                                </p>
-                            </a>
+                            </div>
+                            <p>{{ log.log }}</p>
                         </li>
                     {% endfor %}
                     </ul>