SPR-814: detail.php "show img "

css/base_mixins.less

@@ -282,6 +282,12 @@
     -webkit-flex: @elem;
 }
 
+.flex-wrap() {
+    flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+}
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* positioning */

css/template_detail.less

@@ -4,17 +4,34 @@
  *
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
+
+
 #dokuwiki__detail {
 
-    // linked image
+/* + + + + +  linked image  + + + + + */
-    .img-link{
+    .img-link {
-
         text-align: center;
 
         a {
-            display: inline-block;
-            margin: 0 auto 1.4em;
             position: relative;
+            left: 0;
+            display: inline-block;
+            max-width: 100%;
+            color: @ini_button_color;
+            margin: 0 auto 1.4em;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                background: @ini_button_background;
+                line-height: @line-height-default;
+                padding: @margin-small;
+            }
 
             img {
                 margin: 0;
@@ -27,37 +44,36 @@
             &:hover,
             &:focus,
             &:active {
-                &:before{
+                text-decoration: none;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    box-sizing: border-box;
-                    display: block;
-                    padding: @margin-small;
 
-                    z-index:2;
+                &::before {
-                    background: @ini_button_background;
+                    content: attr(title);
-                    color: @ini_button_color;
-                    content:attr(title);
                 }
+
                 img {
                     border: 1px solid @ini_button_background;
                 }
             }
-
         }
     }
 
-    // meta data
-    div.img_detail {
-        /* vertical minus margin of .img-detail corresponds to the padding of .page  */
-        margin: @margin-default -(@margin-default);
 
+/* + + + + +  meta data  + + + + + */
+    div.img_detail {
+
+        /* vertical minus margin of .img-detail corresponds to the padding of .page */
+        background-color: @ini_background_page_header;
         border: solid @ini_border_light;
         border-width: 1px 0;
-        background-color: @ini_background_page_header;
+        margin: @margin-default -(@margin-default);
-        h1, h2, h3, h4, h5, h6, p{
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p {
             padding-left: @margin-default;
             padding-right: @margin-default;
         }
@@ -67,64 +83,83 @@
         }
 
         dl {
-            display: flex;
+            .display-flex();
-            display: -webkit-flex;
+            .flex-wrap();
-            display: -ms-flexbox;
-
-
-            flex-direction: row;
-            -webkit-flex-direction: row;
-            -ms-flex-direction: row;
-
-            flex-wrap: wrap;
-            -webkit-flex-wrap: wrap;
-            -ms-flex-wrap: wrap;
 
             width: 100%;
 
-            dt, dd {
+            dt,
+            dd {
                 box-sizing: border-box;
                 margin: .2em 0;
                 padding: (@small-spacing * 2) @small-spacing;
             }
 
             dt {
-                width: 33.3%;
                 background-color: @ini_highlight;
                 color: @ini_highlight_text;
 
-            }
+                @media @screen_min-xxs {
-            dd {
+                    width: 33.3%;
-                width: 66.6%;
+                }
-                padding-left: (@small-spacing * 2);
+
+                @media @screen_max-xxs {
+                    width: 40%;
+                }
             }
 
+            dd {
+                padding-left: (@small-spacing * 2);
+
+                @media @screen_min-xxs {
+                    width: 66.6%;
+                }
+
+                @media @screen_max-xxs {
+                    width: 59.9%;
+                }
+            }
         }
+
         .os-map {
             p {
                 text-align: right;
             }
+
             iframe {
-                padding: 0;
-                margin: 0;
                 border: solid @ini_button_background;
                 border-width: 1px 0;
+                margin: 0;
+                padding: 0;
             }
         }
 
         @media @screen_max-md {
             margin-right: -(@margin-default * 1.6);
-            h1, h2, h3, h4, h5, h6, p {
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
                 padding-right: (@margin-default * 1.6);
             }
         }
 
         @media @screen_max-xs {
             margin-left: -(@margin-small);
-            h1, h2, h3, h4, h5, h6, p {
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
                 padding-left: @margin-small;
             }
         }
-
     }
 }