From d593a94d6a1fbcdcc963c1394e2e5bdbda15b2c9 Mon Sep 17 00:00:00 2001
From: Moritz Strohm <strohm@data-quest.de>
Date: Mon, 4 Oct 2021 11:22:07 +0000
Subject: [PATCH] BIESt #100
---
app/views/profile/widget-avatar.php | 36 ++++++-----
resources/assets/stylesheets/less/avatar.less | 60 ++-----------------
.../assets/stylesheets/less/variables.less | 5 ++
resources/assets/stylesheets/scss/avatar.scss | 45 ++++++++++++++
.../assets/stylesheets/scss/variables.scss | 6 ++
resources/assets/stylesheets/studip.scss | 1 +
6 files changed, 82 insertions(+), 71 deletions(-)
create mode 100644 resources/assets/stylesheets/scss/avatar.scss
diff --git a/app/views/profile/widget-avatar.php b/app/views/profile/widget-avatar.php
index e10ccf03e99..ebf5e35b46c 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 1511ec3b10b..8a400688dce 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 7fe4d2ccd1f..5bbaed323f1 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 00000000000..7eb3a401656
--- /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 a91078beea5..23bcd109c46 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 d003669bd92..8d5dfb7e606 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";
--
GitLab