BIESt #100

app/views/profile/widget-avatar.php

-<div class="text-center avatar-widget">
-    <?= $avatar->getImageTag(Avatar::NORMAL, [
-        'class' => 'profile-avatar',
-        'style' => ''
-    ]) ?>
-    <?php if ($GLOBALS['perm']->have_profile_perm('user', $current_user)) : ?>
-        <div class="avatar-overlay" id="avatar-overlay"
-                accept="image/gif,image/png,image/jpeg" capture="camera"
-                data-max-size="<?= Avatar::MAX_FILE_SIZE ?>"
-                data-message-too-large="<?= _('Die hochgeladene Datei ist zu groß. Bitte wählen Sie ein anderes Bild.') ?>"
-                data-message-unaccepted="<?= _('Die hochgeladene Datei hat falsche Typ. Bitte wählen Sie ein anderes Bild.') ?>">
-            <a href="<?= URLHelper::getURL('dispatch.php/avatar/update/user/' . $current_user) ?>" data-dialog>
-                <span><?= _('Bild hochladen oder löschen.') ?> <br> <?= _('Drag & Drop oder Klicken') ?></span>
-            </a>
-        </div>
-    <?php endif ?>
+<div class="avatar-widget">
+    <? if ($GLOBALS['perm']->have_profile_perm('user', $current_user)) : ?>
+        <a class="profile-avatar"
+           accept="image/gif,image/png,image/jpeg" capture="camera"
+           data-max-size="<?= Avatar::MAX_FILE_SIZE ?>"
+           data-message-too-large="<?= _('Die hochgeladene Datei ist zu groß. Bitte wählen Sie ein anderes Bild.') ?>"
+           data-message-unaccepted="<?= _('Die hochgeladene Datei hat falsche Typ. Bitte wählen Sie ein anderes Bild.') ?>"
+           href="<?= URLHelper::getURL('dispatch.php/avatar/update/user/' . $current_user) ?>" data-dialog>
+            <?= $avatar->getImageTag(Avatar::NORMAL) ?>
+            <div id="avatar-overlay" class="avatar-overlay">
+                <div class="text">
+                    <?= _('Bild hochladen oder löschen.') ?>
+                    <br>
+                    <?= _('Drag & Drop oder Klicken') ?>
+                </div>
+            </div>
+        </a>
+    <? else : ?>
+        <?= $avatar->getImageTag(Avatar::NORMAL) ?>
+    <? endif ?>
 </div>
 <div class="profile-sidebar-details">
     <? if ($kings): ?>

resources/assets/stylesheets/less/avatar.less

@@ -3,15 +3,15 @@
 /* --- Avatars of users, courses and institutes ----------------------------- */
 .avatar-small {
     vertical-align: middle;
-    .size(25px, 25px);
+    .size(@avatar-small, @avatar-small);
 }
 .avatar-medium {
-    max-width: 100px;
-    height: 100px;
+    max-width: @avatar-medium;
+    height: @avatar-medium;
 }
 .avatar-normal {
-    max-width: 250px;
-    height: 250px;
+    max-width: @avatar-normal;
+    height: @avatar-normal;
 }
 
 .course-avatar-small {
@@ -37,56 +37,6 @@
     width: 60px;
 }
 
-div.avatar-widget {
-    position: relative;
-
-    .profile-avatar {
-        vertical-align: middle;
-        margin: 5px 0px;
-        position: relative;
-    }
-
-    div.avatar-overlay {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-
-        margin: 0;
-        padding: 0;
-
-        transition: opacity .5s ease-in-out;
-        background-color: fadeout(@base-color, 33.3%);
-        opacity: 0;
-
-        &:hover {
-            opacity: 1;
-        }
-
-        &.dragging {
-            left: -2px;
-            top: -2px;
-            background-color: fadeout(@base-color-40, 33.3%);
-            border: 2px dashed @base-color;
-            opacity: 1;
-        }
-
-        a {
-            color: @white;
-            display: block;
-            height: 100%;
-            width: 100%;
-
-            span {
-                position: absolute;
-                bottom: 1em;
-                left: 0;
-                width: 100%;
-            }
-        }
-    }
-}
 
 #custom_avatar label {
     display: block;

resources/assets/stylesheets/less/variables.less

@@ -31,3 +31,8 @@
 // Drag & Drop specific:
 @drag_and_drop_z_index:    1000;
 @drag_and_drop_border:     1px solid @base-color;
+
+//Avatar sizes:
+@avatar-small:  25px;
+@avatar-medium: 100px;
+@avatar-normal: 250px;

resources/assets/stylesheets/scss/avatar.scss

+div.avatar-widget {
+    .profile-avatar {
+        display: block;
+        margin: 5px;
+        padding: 0;
+        color: $white;
+
+        width: $avatar-normal;
+        height: $avatar-normal;
+
+        position: relative;
+
+        .avatar-overlay {
+            position: absolute;
+            left: 0;
+            top: 0;
+            transition: opacity .5s ease-in-out;
+            background-color: fade-out($base-color, 0.333);
+            opacity: 0;
+            width: $avatar-normal;
+            height: $avatar-normal;
+            text-align: center;
+
+            .text {
+                position: absolute;
+                bottom: 1em;
+                width: $avatar-normal;
+            }
+        }
+
+        &:hover, &:focus {
+            .avatar-overlay {
+                opacity: 1;
+            }
+        }
+
+        &.dragging .avatar-overlay {
+            left: -2px;
+            top: -2px;
+            background-color: fade-out($base-color-40, 0.333);
+            border: 2px dashed $base-color;
+            opacity: 1;
+        }
+    }
+}

resources/assets/stylesheets/scss/variables.scss

@@ -30,6 +30,12 @@ $headings-color:          #444444;
 $bar-bottom-container-height: 40px;
 $header-height: 80px;
 
+//Avatar sizes:
+$avatar-small:  25px;
+$avatar-medium: 100px;
+$avatar-normal: 250px;
+
+
 :root {
     // The special handling for -- as #{"--"} seems to be neccessary to make
     // scss evaluate the color variables

resources/assets/stylesheets/studip.scss

@@ -11,6 +11,7 @@
 @import "scss/actionmenu";
 @import "scss/admin-courses";
 @import "scss/admission";
+@import "scss/avatar";
 @import "scss/blubber";
 @import "scss/contentbar";
 @import "scss/contents";