Visa ordlisteord i sidled istället

bonny · Apr 20, 2024 · 735f3ad · 735f3ad
1 parent d9d24a7
commit 735f3ad
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -1122,20 +1122,33 @@ input[type="url"],
 
 .Event__dictionaryWordsTitle {
     margin-top: 0;
+    font-size: 1rem;
+}
+
+.Event__dictionaryWords__wrap {
+    overflow-x: auto;
+    display: flex;
+    gap: var(--default-margin-double);
+    scroll-snap-type: x mandatory;
+}
+
+.Event__dictionaryWords__wrap > * {
+    flex: 1 0 65%;
+    scroll-snap-align: start;
 }
 
 .Event__dictionaryWord {
-    float: left;
-    width: 48%;
+    /* float: left;
+    width: 48%; */
 }
 
-.Event__dictionaryWord:nth-child(2n + 1) {
+/* .Event__dictionaryWord:nth-child(2n + 1) {
     float: right;
 }
 
 .Event__dictionaryWord:nth-child(2n + 2) {
     clear: both;
-}
+} */
 
 .Event__dictionaryDictionaryLink {
     overflow: auto;
@@ -1150,10 +1163,13 @@ input[type="url"],
 
 .Event__dictionaryWordTitle {
     margin-top: 0;
+    display: inline;
+    font-size: inherit;
+    font-weight: bold;
 }
 
-.Event__dictionaryWordTitle {
-    font-size: 1rem;
+.Event__dictionaryWordDescription {
+    display: inline;
 }
 
 .Event__dictionaryWordDescription > p {

diff --git a/resources/views/parts/crimeevent.blade.php b/resources/views/parts/crimeevent.blade.php
@@ -155,18 +155,20 @@ class="Event__mapImage Event__mapImage--far" src="{{ $event->getStaticImageSrcFa
     <aside class="Event__dictionaryWords">
         <h2 class="Event__dictionaryWordsTitle">Ord som förekommer i händelsen</h2>
 
-        @foreach ($dictionaryWordsInText as $dictionaryWord)
-            <div class="Event__dictionaryWord">
-                <h3 class="Event__dictionaryWordTitle">
-                    <a href="{{ route('ordlistaOrd', ['word' => App\Helper::toAscii($dictionaryWord->word)]) }}">
-                        {{ $dictionaryWord->word }}
-                    </a>
-                </h3>
-                <div class="Event__dictionaryWordDescription">
-                    <p>{!! str_limit(strip_tags(Markdown::parse($dictionaryWord->description)), 100, '…') !!}</p>
+        <div class="Event__dictionaryWords__wrap">
+            @foreach ($dictionaryWordsInText as $dictionaryWord)
+                <div class="Event__dictionaryWord">
+                    <h3 class="Event__dictionaryWordTitle">
+                        <a href="{{ route('ordlistaOrd', ['word' => App\Helper::toAscii($dictionaryWord->word)]) }}">
+                            {{ $dictionaryWord->word }}
+                        </a>
+                    </h3>
+                    <p class="Event__dictionaryWordDescription">
+                        – {!! str_limit(strip_tags(Markdown::parse($dictionaryWord->description)), 100, '…') !!}
+                    </p>
                 </div>
-            </div>
-        @endforeach
+            @endforeach
+        </div>
 
         <p class="Event__dictionaryDictionaryLink"><a href="{{ Route('ordlista') }}">Fler ord hittar du i Ordlistan</a>
         </p>