From eabfc2d5b0fa20643bc01d7b40872ffad39b4e57 Mon Sep 17 00:00:00 2001
From: Andrea <rctandrew100@gmail.com>
Date: Sat, 13 Jan 2024 19:45:32 +0100
Subject: [PATCH] Reduced effects for mobile users + Enter as UI for Admins

---
 res/styles/base.css    | 13 +++++++++++++
 res/styles/propic.css  | 21 +++++++++++++++++----
 res/styles/room.css    | 12 ++++++------
 tpl/admin.html         |  2 +-
 tpl/blocks/badge.html  |  4 ++--
 tpl/blocks/propic.html | 18 ++++++++++++------
 tpl/blocks/room.html   |  2 +-
 tpl/fursuitcount.html  |  2 +-
 tpl/nosecount.html     |  8 ++++----
 tpl/sponsorcount.html  |  4 ++--
 10 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/res/styles/base.css b/res/styles/base.css
index 890dd71..1367190 100644
--- a/res/styles/base.css
+++ b/res/styles/base.css
@@ -5,4 +5,17 @@
 
 summary:has(span.status) {
     background-color: #ffaf0377;
+}
+
+/* Mobile only */
+@media only screen and ((max-width: 500px) or (hover: none)) {
+    .propic-border.blurred {
+        display: none;
+    }
+}
+
+@media only screen and (prefers-reduced-motion) {
+    .propic-border.blurred {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/res/styles/propic.css b/res/styles/propic.css
index 917cd3f..35cba1f 100644
--- a/res/styles/propic.css
+++ b/res/styles/propic.css
@@ -18,9 +18,9 @@ svg.propic-border-filter {
 
 .propic-filler {
     width: 100%;
-    border-radius:0.4em;
-    margin:0 auto;
-    border:4px solid #546e7a;
+    border-radius: 0.4em;
+    margin: 0 auto;
+    border: 4px solid #546e7a;
     opacity: 0;
 }
 
@@ -77,7 +77,7 @@ svg.propic-border-filter {
 }
 
 .propic-flag {
-    z-index: 2;
+    z-index: 4;
     max-width: 2em;
     border-radius:2px;
     right: calc(0% - 0.3em);
@@ -94,4 +94,17 @@ svg.propic-border-filter {
 
 .propic-base {
     border:4px solid #546e7a;
+}
+
+.control-login-as:hover::before{
+    background-color: #2f4e5cc5;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    content: 'Enter as';
+    color: white;
+    text-decoration: none;
+    text-align: center;
+    z-index: 3;
+    border-radius: 0.6rem;
 }
\ No newline at end of file
diff --git a/res/styles/room.css b/res/styles/room.css
index 6460419..67615f1 100644
--- a/res/styles/room.css
+++ b/res/styles/room.css
@@ -7,14 +7,14 @@ span.nsc-room-counter {
     text-transform: capitalize;
 }
 
+#room a[role=button] {
+    display: inline-flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
 @media only screen and (max-width: 500px) {
     div.room-actions a>span {
         display: none;
     }    
 }
-
-#room a[role=button] {
-    display: inline-flex;
-    justify-content: space-around;
-    align-items: center;
-}
\ No newline at end of file
diff --git a/tpl/admin.html b/tpl/admin.html
index 2fd08ce..50b9328 100644
--- a/tpl/admin.html
+++ b/tpl/admin.html
@@ -11,7 +11,7 @@
 		<!-- Quick controls -->
         <h2>Admin panel</h2>
         <a href="/manage/admin/cache/clear" role="button" title="Reload the orders' data and the re-sync items' indexes from pretix">Clear cache</a>
-        <a href="/manage/nosecount" role="button" title="Reload the orders' data and the re-sync items' indexes from pretix">Manage rooms</a>
+        <a href="/manage/nosecount" role="button" title="Shortcut to the nosecount's admin data">Manage rooms</a>
 		<hr>
 	</main>
 	
diff --git a/tpl/blocks/badge.html b/tpl/blocks/badge.html
index 91baf5b..a123d87 100644
--- a/tpl/blocks/badge.html
+++ b/tpl/blocks/badge.html
@@ -11,7 +11,7 @@
 	<form method="POST" enctype="multipart/form-data" action="/manage/propic/upload">
 		<div class="grid" style="text-align:center;margin-bottom:1em;">
 			<div>
-				{% with order=order, imgSrc='/res/propic/' + (order.ans('propic') or 'default.png'), effects = false %}
+				{% with current=order, order=order, imgSrc='/res/propic/' + (order.ans('propic') or 'default.png'), effects = false %}
 					{% include 'blocks/propic.html' %}
 				{% endwith %}
 				<p>Normal Badge</p>
@@ -21,7 +21,7 @@
 			</div>
 			{% if order.is_fursuiter %}
 				<div>
-					{% with order=order, imgSrc='/res/propic/' + (order.ans('propic_fursuiter') or 'default.png'), effects = false %}
+					{% with current=order, order=order, imgSrc='/res/propic/' + (order.ans('propic_fursuiter') or 'default.png'), effects = false %}
 						{% include 'blocks/propic.html' %}
 					{% endwith %}
 					<p>Fursuit Badge</p>
diff --git a/tpl/blocks/propic.html b/tpl/blocks/propic.html
index 3f5a48e..ef7e950 100644
--- a/tpl/blocks/propic.html
+++ b/tpl/blocks/propic.html
@@ -1,14 +1,20 @@
 <div class="propic-container" >
     {% if effects and (not order.sponsorship == None) %}
-    <div class="absolute propic-border {{'propic-animated-' + (order.sponsorship or 'base')}}">
-      <div class="propic-border-animation"></div>
+    <div aria-hidden="true" class="absolute propic-border {{'propic-animated-' + (order.sponsorship or 'base')}}">
+      <div aria-hidden="true" class="propic-border-animation"></div>
     </div>
-    <div class="absolute propic-border blurred {{'propic-animated-' + (order.sponsorship or 'base')}}">
-      <div class="propic-border-animation"></div>
+    <div aria-hidden="true" class="absolute propic-border blurred {{'propic-animated-' + (order.sponsorship or 'base')}}">
+      <div aria-hidden="true" class="propic-border-animation"></div>
     </div>
     {% endif %}
-    <img alt="Your own profile picture" src="{{imgSrc}}" class="absolute propic {{(('propic-' + order.sponsorship) if not effects else '') if order.sponsorship else 'propic-base'}}"/>
-    <svg alt="" class="propic-filler {{(('propic-' + order.sponsorship) if not effects else '') if order.sponsorship else 'propic-base'}}" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"></svg>
+    {% if current and current.isAdmin () and (not current.code == order.code )%}
+    <a class="control-login-as" href="/manage/admin/loginas/{{order.code}}">
+    {% endif %}
+    <img alt="{{order.ans('fursona_name') if order.ans('fursona_name') else 'A user'}}'s profile picture" src="{{imgSrc}}" class="absolute propic {{(('propic-' + order.sponsorship) if not effects else '') if order.sponsorship else 'propic-base'}}"/>
+    <svg aria-hidden="true" alt="" class="propic-filler {{(('propic-' + order.sponsorship) if not effects else '') if order.sponsorship else 'propic-base'}}" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"></svg>
+    {% if current and current.isAdmin () %}
+    </a>
+    {% endif %}
     {% if flag %}
       <img alt="flag" class="absolute propic-flag" src="/res/flags/{{order.country.lower()}}.svg"/>
     {% endif %}
diff --git a/tpl/blocks/room.html b/tpl/blocks/room.html
index dbf1c80..df3c548 100644
--- a/tpl/blocks/room.html
+++ b/tpl/blocks/room.html
@@ -27,7 +27,7 @@
 		<div class="grid people" style="padding-bottom:1em;">
 			{% for person in room_members %}
 				<div style="margin-bottom: 1em;">
-					{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
+					{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
 						{% include 'blocks/propic.html' %}
 					{% endwith %}
 					<h3>{{person.ans('fursona_name')}}</h3>
diff --git a/tpl/fursuitcount.html b/tpl/fursuitcount.html
index 08ea5d4..cdb9f5e 100644
--- a/tpl/fursuitcount.html
+++ b/tpl/fursuitcount.html
@@ -15,7 +15,7 @@
 				<div class="grid people" style="padding-bottom:1em;">
 			{% endif %}
 				<div style="margin-bottom: 1em;">
-					{% with order=person, imgSrc='/res/propic/' + (person.ans('propic_fursuiter') or 'default.png'), effects = true, flag = true %}
+					{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic_fursuiter') or 'default.png'), effects = true, flag = true %}
 						{% include 'blocks/propic.html' %}
 					{% endwith %}
 					<h5>{{person.ans('fursona_name')}}</h5>
diff --git a/tpl/nosecount.html b/tpl/nosecount.html
index 019ccfb..c6a021b 100644
--- a/tpl/nosecount.html
+++ b/tpl/nosecount.html
@@ -29,7 +29,7 @@
 						{% if m in orders %}
 							{% with person = orders[m] %}
 								<div style="margin-bottom: 1em;">
-									{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
+									{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
 										{% include 'blocks/propic.html' %}
 									{% endwith %}
 									<h5>{{person.ans('fursona_name')}}</h5>
@@ -61,7 +61,7 @@
 					{% if m in orders %}
 						{% with person = orders[m] %}
 							<div style="margin-bottom: 1em;">
-								{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
+								{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
 									{% include 'blocks/propic.html' %}
 								{% endwith %}
 								<h5>{{person.ans('fursona_name')}}</h5>
@@ -81,7 +81,7 @@
 				<div class="grid people" style="padding-bottom:1em;">
 			{% endif %}
 				<div style="margin-bottom: 1em;">
-					{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
+					{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
 						{% include 'blocks/propic.html' %}
 					{% endwith %}
 					
@@ -98,7 +98,7 @@
 				<div class="grid people" style="padding-bottom:1em;">
 			{% endif %}
 				<div style="margin-bottom: 1em;">
-					{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
+					{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
 						{% include 'blocks/propic.html' %}
 					{% endwith %}
 					<h5>{{person.ans('fursona_name')}}</h5>
diff --git a/tpl/sponsorcount.html b/tpl/sponsorcount.html
index bc41f13..79fe46e 100644
--- a/tpl/sponsorcount.html
+++ b/tpl/sponsorcount.html
@@ -17,7 +17,7 @@
 				<div class="grid people" style="padding-bottom:1em;">
 			{% endif %}
 				<div style="margin-bottom: 1em;">
-					{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
+					{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
 						{% include 'blocks/propic.html' %}
 					{% endwith %}
 					<h5>{{person.ans('fursona_name')}}</h5>
@@ -32,7 +32,7 @@
 				<div class="grid people" style="padding-bottom:1em;">
 			{% endif %}
 				<div style="margin-bottom: 1em;">
-					{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
+					{% with current=order, order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
 						{% include 'blocks/propic.html' %}
 					{% endwith %}
 					<h5>{{person.ans('fursona_name')}}</h5>
-- 
2.43.4