rework empty page placeholder for wiki and blubber, fixes #116

resources/assets/stylesheets/mixins/studip.less

@@ -76,7 +76,7 @@
 }
 
 .role2color(@role) when (@role = 'navigation') {
-  @color: 'lightblue';
+  @color: 'blue';
 }
 
 .role2color(@role) when (@role = 'new'), (@role = 'attention'), (@role = 'status-red') {

resources/assets/stylesheets/mixins/studip.scss

@@ -44,9 +44,7 @@
     border: 0;
 }
 
-
-
-@mixin background-icon($icon, $role: clickable, $size: 16) {
+@function icon-path($icon, $role: clickable) {
     $icon: unquote($icon);
     $role: unquote($role);
 
@@ -58,7 +56,7 @@
     } @else if $role == inactive {
         $color: 'grey';
     } @else if $role == navigation {
-        $color: 'lightblue';
+        $color: 'blue';
     } @else if $role == new or $role == attention or $role == status-red {
         $color: 'red';
     } @else if $role == info_alt or $role == info-alt {
@@ -67,14 +65,11 @@
         $color: 'yellow';
     }
 
-    @if $size {
-        @if unitless($size) {
-            $size: $size * 1px;
-        }
-        background-size: $size;
-    }
+    @return "#{$icon-path}/#{$color}/#{$icon}.svg";
+}
 
-    $svg: "#{$icon-path}/#{$color}/#{$icon}.svg";
+@mixin background-icon($icon, $role: clickable, $size: 16) {
+    $svg: icon-path($icon, $role);
 
     background-image: url("#{$svg}");
     background-size: $size;
@@ -107,6 +102,52 @@
     }
 }
 
+@mixin empty-placeholder-image($icon, $background-color: $dark-gray-color-5) {
+    &::before,
+    &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        content: '';
+        display: block;
+        background-image: url(icon-path($icon));
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+    &::before {
+        height: 280px;
+        width: 280px;
+        opacity: 0.3;
+        transform: translate(-50%, -50%);
+    }
+    &::after {
+        height: 180px;
+        width: 180px;
+        opacity: 0.6;
+        transform: translate(20px, -50px);
+
+    }
+
+    padding-top: 100px;
+    background-image: url(icon-path($icon));
+    background-repeat: no-repeat;
+    background-size: 140px;
+    background-position: calc(50% - 100px) calc(50% + 40px);
+
+    @if ($background-color) {
+        background-color: mix($background-color, rgba(255, 255, 255, 0), 70%);
+    }
+
+    text-align: center;
+    height: 40vh;
+    color: $content-color;
+    font-size: 1.6em;
+    position: relative;
+
+}
+
 // Scrollboxes
 // From http://lea.verou.me/2012/04/background-attachment-local/
 //  and http://dabblet.com/gist/6134408

resources/assets/stylesheets/scss/blubber.scss

@@ -359,20 +359,12 @@
     }
 
     .empty_blubber_background {
-        padding-top: 100px;
-        background-image: url('#{$icon-path}/lightblue/blubber.svg'), url('#{$icon-path}/blue/blubber.svg'), url('#{$icon-path}/lightblue/blubber.svg');
-        background-repeat: no-repeat;
-        background-size: 40% 40%, 30% 30%, 70% 70%;
-        background-position: 70% 50%, 30% 45%, center 0%;
-        background-blend-mode: normal, normal, overlay;
+        @include empty-placeholder-image('blubber');
         background-color: mix($dark-gray-color-5, rgba(255, 255, 255, 0), 70%);
-        text-align: center;
-        height: 40vh;
-        color: $content-color;
-        font-size: 1.6em;
+
         > :first-child {
             position: relative;
-            top: 170px;
+            top: 30vh;
         }
     }
 }

resources/assets/stylesheets/scss/wiki.scss

@@ -60,12 +60,8 @@ a.wiki-restricted {
     padding-left: $icon-size;
 }
 
-.wiki-background {
-    @include background-icon(wiki, navigation, 260);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-color: hsla(0,0%,100%,0.70);
-    background-blend-mode: overlay;
+.wiki-empty-background {
+    @include empty-placeholder-image('wiki', false);
 }
 
 .flex {
@@ -73,20 +69,6 @@ a.wiki-restricted {
     justify-content: center;
 }
 
-.image1 {
-    height: 140px;
-    width: 160px;
-    margin-top: 90px;
-    margin-left: 10px;
-}
-
-.image2 {
-    height: 180px;
-    width: 200px;
-    margin-top: 120px;
-    margin-left: 10px;
-}
-
 .wiki-teaser {
     font-size: 24px;
 }

templates/wiki/show.php

@@ -2,12 +2,7 @@
 <article class="studip wiki" id="main_content" role="main">
     <section>
         <? if ($wikipage->keyword == 'WikiWikiWeb' && $wikipage->isNew()): ?>
-            <div class="wiki-background">
-                <div class="flex">
-                    <img src='assets/images/icons/blue/wiki.svg' class="image1">
-                    <img src='assets/images/icons/lightblue/wiki.svg' class="image2">
-                </div>
-            </div>
+            <div class="wiki-empty-background"></div>
             <div class="flex">
                 <div class="wiki-teaser">
                     <?= _('Mach die Welt ein Stückchen schlauer.') ?>