diff --git a/app/views/profile/widget-avatar.php b/app/views/profile/widget-avatar.php
index e10ccf03e99403720f6690f0c0cebf226f18c87f..ebf5e35b46c1d9a04e721c985ba82ca585bd9bdb 100644
--- a/app/views/profile/widget-avatar.php
+++ b/app/views/profile/widget-avatar.php
@@ -1,19 +1,23 @@
-<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): ?>
diff --git a/resources/assets/stylesheets/less/avatar.less b/resources/assets/stylesheets/less/avatar.less
index 1511ec3b10b9c0840f25952a3071aa0ba8c0ad61..8a400688dceb956ac053e8883df464e114241b9e 100644
--- a/resources/assets/stylesheets/less/avatar.less
+++ b/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;
diff --git a/resources/assets/stylesheets/less/variables.less b/resources/assets/stylesheets/less/variables.less
index 7fe4d2ccd1fc10fe96d47326101dbdf7671fcfd3..5bbaed323f13ab2cce0fd4f83a475c56399cfebd 100644
--- a/resources/assets/stylesheets/less/variables.less
+++ b/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;
diff --git a/resources/assets/stylesheets/scss/avatar.scss b/resources/assets/stylesheets/scss/avatar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7eb3a401656b25b48b4e189e968299daf18fbf67
--- /dev/null
+++ b/resources/assets/stylesheets/scss/avatar.scss
@@ -0,0 +1,45 @@
+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;
+ }
+ }
+}
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index a91078beea568d0f00246b1b845cf17579deafc0..23bcd109c46ef606ee7f32d5ca5376b4f072d4bd 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/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
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index d003669bd92f5616964fdf5b0a56c8e14e488bca..8d5dfb7e6067ff7b13f3baa3996beef5b4d13457 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/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";