Further tweaked promut fomantic-build to IASS CI (#16)

src/main/java/de/mikromedia/webpages/model/Section.java

@@ -178,6 +178,13 @@ public String getRelatedTopicTypeUri() {
         return null;
     }
 
+    public String getRelatedTopicFileName() {
+        if (this.relatedTopic != null) {
+            return this.relatedTopic.getSimpleValue().toString();
+        }
+        return null;
+    }
+
     public String getRelatedTopicFilePath() {
         if (this.relatedTopic != null && this.relatedTopic.getTypeUri().equals("dmx.files.file")) {
             return this.relatedTopic.getChildTopics().getString("dmx.files.path", null);

src/main/resources/views/fragments/contact-form.html

@@ -28,7 +28,7 @@
                 <textarea rows="4" name="message" placeholder="Your message"></textarea>
             </div>
             <div class="field">
-                <input class="ui button" type="submit" value="Send message" />
+                <input class="ui basic button" type="submit" value="Send message" />
                 <input class="ui button" name="website" type="hidden" th:value="${website}" />
                 <input class="ui button" name="webalias" type="hidden" th:value="${webalias}" />
             </div>
@@ -58,7 +58,7 @@ <h4 class="ui header"><i class="icon mail"></i>Mail us</h4>
             <textarea rows="5" name="message" placeholder="Your message"></textarea>
         </div>
         <div class="field">
-            <input class="ui button" type="submit" value="Send message" />
+            <input class="ui basic button" type="submit" value="Send message" />
             <input class="ui button" name="website" type="hidden" th:value="${website}" />
             <input class="ui button" name="webalias" type="hidden" th:value="${webalias}" />
         </div>

src/main/resources/views/fragments/inline-styles.html

@@ -88,7 +88,7 @@
         /*<![CDATA[*/
          @media(min-width: 1025px) {
             .page .ui.segment.section-bg-[[${section.id}]] {
-                background-image: url('/files/file/[[${section.largeImage}]]');
+                background-image: url('/filerepo/[[${section.largeImage}]]');
                 background-repeat: no-repeat;
                 background-position: center center;
                 background-attachment: [[${section.largeImageAttachment}]];
@@ -101,7 +101,7 @@
         /*<![CDATA[*/
         @media(max-width: 1024px) {
             .page .ui.segment.section-bg-[[${section.id}]] {
-                background-image: url('/files/file/[[${section.smallImage}]]');
+                background-image: url('/filerepo/[[${section.smallImage}]]');
                 background-repeat: no-repeat;
                 background-position: center center;
                 background-attachment: [[${section.smallImageAttachment}]];
@@ -131,7 +131,7 @@
         /*<![CDATA[*/
          @media(min-width: 1025px) {
             .page .ui.segment .tile-background-[[${content.id}]] {
-                background-image: url('/files/file/[[${content.largeImage}]]');
+                background-image: url('/filerepo/[[${content.largeImage}]]');
                 background-repeat: no-repeat;
                 background-position: center center;
                 background-size: cover;
@@ -143,7 +143,7 @@
         /*<![CDATA[*/
         @media(max-width: 1024px) {
             .page .ui.segment .tile-background-[[${content.id}]] {
-                background-image: url('/files/file/[[${content.smallImage}]]');
+                background-image: url('/filerepo/[[${content.smallImage}]]');
                 background-repeat: no-repeat;
                 background-position: center center;
                 background-size: cover;

src/main/resources/views/fragments/sections.html

@@ -354,19 +354,54 @@ <h2 th:text="${content.title}" class="title">Quote 1 &amp; 2</h2>
     </div>
 </div>
 
-<!-- Native Video Embed -->
+<!-- Native Embed -->
 <div th:fragment="native-video-section (section)"
      th:id="${section.anchorId}"
      th:class="'ui stripe native-embed segment section-bg-' + ${section.id} + ' ' + ${section.customClassName}">
     <!-- Inline Section Styles -->
     <div th:replace="fragments/inline-styles :: section-background (${section})" />
     <div th:if="${section.relatedTopic}">
+
+      <!-- Native SVG Embed -->
+      <div th:if="${#strings.equalsIgnoreCase(section.relatedTopicFileMediaType, 'image/svg+xml')}">
+        <!-- Section Title -->
+        <div class="ui container text" th:if="${not #strings.isEmpty(section.title)}">
+            <h1 class="ui header" th:text="${section.title}">
+                Section Title
+            </h1>
+        </div>
+        <div th:each="content, iterator : ${section.contents}" class="ui container text tile-row">
+          <!-- Standard Tile Content Rendering -->
+          <div th:if="${content}" class="tile-content tc">
+              <!-- Tiles -->
+              <h2 th:if="${not #strings.isEmpty(content.title)}" class="title" th:text="${content.title}">
+                Tile Title
+              </h2>
+              <div class="content" th:utext="${content.html}">
+                <p>Tile Content</p>
+               </div>
+           </div>
+        </div>
+        <div class="ui text container svg-embed">
+          <img th:src="'/filerepo/' + ${section.relatedTopicFilePath}"
+               th:title="${section.relatedTopicFileName}"
+               th:alt="'Graphic: ' + ${section.relatedTopicFileName}"/>
+          <p>
+            <a th:href="'/filerepo/' + ${section.relatedTopicFilePath}" th:download="${section.relatedTopicFileName}">
+              <button class="ui basic button" type="button">Download Graphic</button>
+            </a>
+          </p>
+        </div>
+      </div>
+      <!-- Native Video Embed -->
+      <div th:if="${#strings.contains(section.relatedTopicFileMediaType, 'video')}">
         <video controls="controls" muted="true" name="media" preload="none">
-            <source th:src="'/filerepo/' + ${section.relatedTopicFilePath}"
-               th:type="${section.relatedTopicFileMediaType}" />
-            Sorry, your browser doesn't support embedded videos,
-            but don't worry, you can <a th:href="'/filerepo/' + ${section.relatedTopicFilePath}">download it</a>
-            and watch it with your favorite video player!
-         </video>
+          <source th:src="'/filerepo/' + ${section.relatedTopicFilePath}"
+             th:type="${section.relatedTopicFileMediaType}" />
+          Sorry, your browser doesn't support embedded videos,
+          but don't worry, you can <a th:href="'/filerepo/' + ${section.relatedTopicFilePath}">download it</a>
+          and watch it with your favorite video player!
+       </video>
+      </div>
     </div>
 </div>

src/main/resources/web/static/css/promut.css

@@ -64,13 +64,23 @@ h2, h3, h4, h5, h6,
 /** Hyperlink Styles **/
 .webpages a {
     text-decoration: none;
+    color: #226582;
+}
+
+.webpages a:hover {
+    color: #42bdf4;
 }
 
-.webpages .ui.text.container .segment a {
+.webpages .ui.segment .tile-content a,
+.webpages .ui.main.text.container a {
     font-weight: bold;
-    color: #333;
 }
 
+/** .webpages .ui.segment .tile-content a:hover,
+.webpages .ui.main.text.container a:hover {
+    color: #226582;
+} **/
+
 /** External Links are presented as such **/
 .ui.segment a[target="_blank"]::after {
     content: "  \29C9";
@@ -93,13 +103,20 @@ h2, h3, h4, h5, h6,
     text-decoration: none;
 }
 
+.webpages button.ui.button,
 .webpages input.ui.button,
 .webpages a.ui.button {
     border-radius: 0em;
     padding: .5em 1em;
     font-weight: 300;
 }
 
+.webpages .masthead .ui.basic.inverted.button.tale {
+    color: #FDF8ED;
+    -webkit-box-shadow: 0 0 0 2px #FDF8ED77 inset;
+    box-shadow: 0 0 0 2px #FDF8ED77 inset;
+}
+
 /** Menus **/
 
 .ui.large.inverted.menu img.logo {
@@ -155,10 +172,7 @@ h2, h3, h4, h5, h6,
     margin-left: 1.5rem;
 }
 
-.two-columns-equal .tc p img {
-    width: 100%;
-    height: auto;
-}
+
 
 .ui.segment .ui.text.container table,
 .ui.segment .ui.text.container p,
@@ -171,14 +185,23 @@ h2, h3, h4, h5, h6,
 }
 
 .ui.footer.segment.striped {
-    padding-top: 2em;
+    padding-top: 4em;
     padding-bottom: 1em;
 }
 
 .ui.footer.segment .ui.container.text {
     position: relative;
 }
 
+.section-bg-11594.two-columns-equal .tile img {
+    max-height: 125px;
+    width: auto;
+}
+.section-bg-9677.two-columns-equal .tile img {
+    max-width: 200px;
+    height: auto;
+}
+
 .footer.segment .footer-links .submenu,
 .ui.footer.segment .ui.container.text p {
     font-size: 1rem;
@@ -194,6 +217,11 @@ h2, h3, h4, h5, h6,
     text-decoration: none;
 }
 
+.footer.segment .footer-text img {
+    max-width: 450px;
+    height: auto;
+}
+
 .footer.segment .footer-links .logo img {
     height: auto;
     position: relative;
@@ -227,6 +255,7 @@ h2, h3, h4, h5, h6,
 }
 
 .ui.segment h1.ui.header {
+    /** border-top: 6px solid #42bdf4; **/
     padding-top: 1.2em;
     font-size: 2.5rem;
     font-weight: 300;
@@ -352,11 +381,14 @@ header.ui.masthead .headline {
 }
 
 /** ProMUT Project Colors **/
-
 .tale-blue {
     color: #226582;
 }
 
+.tale-beige-text {
+    color: #FDF8ED;
+}
+
 .medium-blue-3 {
     color: #3086ac;
 }

src/main/resources/web/static/css/semantic-ui-overrides.css

@@ -21,6 +21,10 @@ h3.header .value {
     font-size: 0.8em;
 }
 
+.masthead .headline h2 .p {
+    font-size: 1.7em
+}
+
 .masthead.segment {
     /** min-height: 700px; **/
     padding: 1em 0em;
@@ -288,12 +292,23 @@ header.inverted .page-meta .label {
     padding-bottom: 1em;
 }
 
+.two-columns-equal .tc p img {
+    max-width: 100%;
+    height: auto;
+}
+
+.tile-content h1:first-child,
+.tile-content h2:first-child,
+.tile-content h3:first-child {
+    margin-top: 1em;
+}
+
 .ui.equal.grid.quote .tile-content {
     padding: 2em;
 }
 
 .ui.segment.n-columns .grid .column {
-    padding: 1em 3em 3em 3em;
+    padding: 1em 3em 3em 2.8em;
 }
 
 .ui.segment.two-n-columns {
@@ -469,10 +484,11 @@ header .ui.main-menu.container {
         padding-top: 2.5em;
     }
     .webpages .ui.segment.n-columns h1.ui.header {
-        padding-left: .5em;
+        padding-left: 1.15em;
     }
     .webpages .ui.segment.n-columns .tile {
-        min-height: 100px;    }
+        min-height: 100px;
+    }
     .ui.segment.two-n-columns .grid .row .column.tile {
         padding: 1em;
     }