Improves person portrait display on mobile devices

OneGov · Apr 2, 2019 · 2a03a7e · 2a03a7e
1 parent d841ed1
commit 2a03a7e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/HISTORY.rst b/HISTORY.rst
@@ -1,6 +1,9 @@
 Changelog
 ---------
 
+- Improves person portrait display on mobile devices.
+  [href]
+
 - Fixes date-error when returning to a datetime-picker on Safari.
   [href]
 

diff --git a/onegov/org/theme/styles/org.scss b/onegov/org/theme/styles/org.scss
@@ -2188,6 +2188,8 @@ $person-email-icon: '\f003';
         .person-card-portrait {
             float: none;
             margin-bottom: 1em;
+            width: calc(100vw - 3rem);
+            height: calc(100vw - 3rem);
         }
     }
 }
@@ -2197,10 +2199,10 @@ $person-email-icon: '\f003';
 */
 
 .person-list-card {
-    .person-card-portrait {
-        @include circle;
+    display: flex;
 
-        height: 5rem; // enough to show three lines of text
+    .person-card-portrait {
+        height: 5rem;
         text-align: center;
         width: 5rem;
 
@@ -2210,15 +2212,15 @@ $person-email-icon: '\f003';
     }
 
     > a {
-        float: left;
         margin-right: 1em;
     }
 
     ul {
-        float: left;
-
         > li {
             font-size: .875rem;
+            max-width: calc(100vw - 7.5rem);
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
@@ -3351,6 +3353,11 @@ ul.search-results {
     h2 {
         border-bottom: 1px solid $gray-pastel;
     }
+
+    ul {
+        margin-left: 0;
+        list-style: none;
+    }
 }
 
 @media #{$large-only} {