fixes #1076 except for search-field

NatLibFi · Oct 7, 2020 · 38cf4c3 · 38cf4c3
1 parent 299ee49
commit 38cf4c3
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 26 deletions.
diff --git a/resource/css/styles.css b/resource/css/styles.css
@@ -203,7 +203,7 @@ ul {
 #topbar-language-navigation {
   display: flex;
   flex-wrap: wrap;
-  align-self: end;
+  align-self: flex-end;
 }
 
 .topbar > a {
@@ -230,7 +230,7 @@ ul {
   display: inline-flex;
   order: 2;
   flex-wrap: wrap;
-  align-content: end;
+  align-content: flex-end;
   margin-top: 5px;
   margin-bottom: 2px;
 }
@@ -279,7 +279,7 @@ ul {
   min-width: 0;
   width: auto;
   flex-wrap: wrap;
-  align-content: end;
+  align-content: flex-end;
   margin-top: 5px;
   margin-bottom: 2px;
 }
@@ -722,6 +722,11 @@ span.xl-pref-label > img {
 #vocabulary-list, #vocabulary-list-wide, #vocabulary-list-left, #vocabulary-list-right {
   background-color: #fff;
   display: inline-block;
+  word-break: break-word;
+}
+
+.logo-header > h2 {
+  word-break: initial;
 }
 
 .voclist-wide #vocabulary-list {
@@ -776,6 +781,10 @@ span.xl-pref-label > img {
   height: 150px;
 }
 
+#feedback-fields p {
+  word-break: break-word;
+}
+
 #feedback-fields > .dropdown {
   margin-bottom: 10px;
 }
@@ -790,6 +799,13 @@ span.xl-pref-label > img {
   width: 100%;
 }
 
+#feedback-fields > .open > .dropdown-menu > li > a {
+  white-space: normal;
+  text-indent: -10px;
+  margin-left: 10px;
+  word-break: break-word;
+}
+
 #feedback-fields > .open > .dropdown-menu > li:hover > a {
   color: #fff !important;
 }
@@ -798,15 +814,17 @@ span.xl-pref-label > img {
   background-color: #F6F7F8;
   border: 0;
   color: #00748f;
-  height: 34px;
   text-align: left;
   width: 100%;
+  white-space: inherit;
+  word-break: break-word;
+  padding-right: 25px;
 }
 
 #feedback-vocid > .caret {
   position: absolute;
   right: 10px;
-  top: 14px;
+  top: 50%;
 }
 
 #feedback-vocid:hover, #feedback-vocid:focus, #feedback-vocid:active {
@@ -825,6 +843,7 @@ span.xl-pref-label > img {
   border-top: 2px solid #394554;
   min-height: 140px;
   margin: 0;
+  max-width: 500px;
 }
 
 .feedback-box textarea, .feedback-box input, .feedback-box select, .feedback-box button, .feedback-box textarea:focus, .feedback-box input:focus, .feedback-box select:focus, .feedback-box button:focus {
@@ -880,7 +899,6 @@ span.xl-pref-label > img {
   border-top: 2px solid #394554;
   margin-bottom: 15px;
   padding-bottom: 15px;
-  width: 500px;
 }
 
 .about-content {
@@ -894,8 +912,9 @@ span.xl-pref-label > img {
   position: absolute;
 }
 
-.about-extra-info {
-  width: 500px;
+#about, .about-extra-info  {
+  max-width: 500px;
+  word-break: break-word;
 }
 
 .credits {
@@ -1123,6 +1142,10 @@ li.sub-group {
   border-image: url('../pics/stripe.png') 20 20 repeat;
 }
 
+#statistics, #counts {
+  word-break: break-all;
+}
+
 /* vocabulary
  ****************************/
 .container {
@@ -1132,10 +1155,12 @@ li.sub-group {
 
 .download-links {
   margin-bottom: 15px;
+  word-break: break-all;
 }
 
-.download-links a {
-  margin-left: 5px;
+.download-links > * {
+  margin-right: 5px;
+  display: inline-block;
 }
 
 .count-type {
@@ -1420,6 +1445,7 @@ tr.replaced-by > td > ul > li > a {
 #vocab-info h2 {
   font-size: 27px;
   font-weight: 400;
+  word-break: break-word;
 }
 
 #vocab-info h3 {
@@ -1844,7 +1870,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
 
   .content > .feedback-box, .content > #about, .content > .about-extra-info {
     margin-left: 120px;
-    width: 500px;
   }
 
   .tt-dropdown {
@@ -1872,6 +1897,14 @@ body, .versal, h1, h2, h3, p, .versal-bold {
     display: none;
   }
 
+  .qtip-skosmos:not(#qtip-0) {
+    left: 0 !important;
+  }
+
+  .qtip-skosmos:not(#qtip-0) canvas {
+    display: none !important;
+  }
+
   .content {
     margin: 0 auto;
   }
@@ -1908,10 +1941,33 @@ body, .versal, h1, h2, h3, p, .versal-bold {
   }
 }
 
-@media (max-width: 400px) {
+@media (max-width: 450px) {
+  .content > .feedback-logo {
+    position: relative;
+    width: min-content;
+  }
 
-  #navi3 {
-    display: none;
+  .content > .container.feedback-box {
+    margin-left: 10px;
+    margin-top: 20px;
+  }
+
+  .qtip-skosmos {
+    min-width: auto;
+    left: 0 !important;
+  }
+  .qtip-skosmos canvas {
+    display: none !important;
+  }
+}
+
+@media (max-width: 530px) {
+  .content > #about {
+    margin-top: 20px;
+  }
+
+  .content > #about, .content .about-extra-info {
+     margin-left: 0;
   }
 }
 
@@ -1943,7 +1999,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
 
   .concept-main > .row > .property-label-pref {
       margin-top: 10px;
-      height: 20px;
       line-height: 20px;
   }
 
@@ -1972,10 +2027,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
     width: 95%;
   }
 
-  .content {
-    overflow: hidden;
-  }
-
 }
 
 @media (max-width: 800px) {
@@ -2091,10 +2142,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
     margin: auto 0;
   }
 
-  .content > .feedback-box, .content > #about {
-    width: 500px;
-  }
-
   .content {
     margin-left: 330px;
   }
@@ -2224,7 +2271,7 @@ body, .versal, h1, h2, h3, p, .versal-bold {
   }
 
   .content > .feedback-box, .content > #about, .about-extra-info {
-    width: 600px;
+    max-width: 600px;
   }
 
   .tt-dropdown-menu {

diff --git a/view/vocab-shared.twig b/view/vocab-shared.twig
@@ -56,7 +56,7 @@
     {% if vocab.config.dataURLs %}
     {% apply spaceless %}
     <div class="download-links">
-      <span class="versal">{% trans %}Download this vocabulary:{% endtrans %}
+      <span class="versal">{% trans %}Download this vocabulary:{% endtrans %}</span>
         {% if 'application/rdf+xml' in vocab.config.dataURLs|keys %}
           <a href="rest/v1/{{ request.vocabid }}/data?format=application/rdf%2Bxml">RDF/XML</a>
         {% endif %}
@@ -72,7 +72,6 @@
                 <a href="rest/v1/{{ request.vocabid }}/data?format=application/marcxml%2Bxml">MARCXML</a>
             {% endif %}
         {% endif %}
-      </span>
     </div>
     {% endapply %}
     {% endif %}