mirror of
https://git.linux-kernel.at/oliver/ivatar.git
synced 2025-11-18 22:18:02 +00:00
Improve mobile layout for photo assignment pages
- Replace float layout with responsive CSS Grid for photo selection - Add proper spacing between image boxes on mobile devices - Fix button overflow issues with responsive flexbox layout - Consolidate duplicate CSS into main stylesheet - Apply improvements to both email and OpenID assignment templates
This commit is contained in:
Oliver Falk
@@ -4,27 +4,16 @@
|
||||
{% block title %}{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.nobutton {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
</style>
|
||||
<h1>{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}</h1>
|
||||
|
||||
{% if user.photo_set.count %}
|
||||
<p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this email address:' %}</p>
|
||||
<div class="row">
|
||||
<div class="photo-grid">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" class="photo-card">{% csrf_token %}
|
||||
<input type="hidden" name="photo_id" value="{{ photo.id }}">
|
||||
<button type="submit" name="photo{{ photo.id }}" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel panel-tortin">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if email.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
@@ -37,12 +26,13 @@ outline: inherit;
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div class="photo-grid">
|
||||
<form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" class="photo-card">{% csrf_token %}
|
||||
<button type="submit" name="photoNone" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel panel-tortin">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if email.photo.id == photo.id %}{% if not email.bluesky_handle %}<i class="fa fa-check"></i>{% endif %}{% endif %} {% trans 'No image' %}</h3>
|
||||
</div>
|
||||
@@ -55,8 +45,8 @@ outline: inherit;
|
||||
</button>
|
||||
</form>
|
||||
{% if email.bluesky_handle %}
|
||||
<form action="" style="float:left;margin-left:20px">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<form action="" class="photo-card">
|
||||
<div class="panel panel-tortin">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-check"></i> {% trans "Bluesky" %}</h3>
|
||||
</div>
|
||||
@@ -70,14 +60,13 @@ outline: inherit;
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div style="height:8px"></div>
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}Upload a new one{% endblocktrans %}</a>
|
||||
<div class="action-buttons">
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}Upload a new one{% endblocktrans %}</a>
|
||||
<a href="{% url 'import_photo' %}" class="button">{% blocktrans %}Import from other services{% endblocktrans %}</a>
|
||||
</div>
|
||||
|
||||
<div style="height:8px"></div>
|
||||
<form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div style="margin-top: 2rem;">
|
||||
<form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
|
||||
{% if email.bluesky_handle %}
|
||||
@@ -89,7 +78,4 @@ outline: inherit;
|
||||
<button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:40px"></div>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -4,27 +4,16 @@
|
||||
{% block title %}{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_address }}{% endblocktrans %}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.nobutton {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
</style>
|
||||
<h1>{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_address }}{% endblocktrans %}</h1>
|
||||
|
||||
{% if user.photo_set.count %}
|
||||
<p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this openid address:' %}</p>
|
||||
<div class="row">
|
||||
<div class="photo-grid">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" class="photo-card">{% csrf_token %}
|
||||
<input type="hidden" name="photo_id" value="{{ photo.id }}">
|
||||
<button type="submit" name="photo{{ photo.id }}" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel panel-tortin">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if openid.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
@@ -37,13 +26,13 @@ outline: inherit;
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div class="photo-grid">
|
||||
<form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" class="photo-card">{% csrf_token %}
|
||||
<button type="submit" name="photoNone" class="nobutton">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<div class="panel panel-tortin">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{% if not openid.photo and not openid.bluesky_handle %}<i class="fa fa-check"></i>{% endif %} {% trans 'No image' %}</h3>
|
||||
</div>
|
||||
@@ -56,8 +45,8 @@ outline: inherit;
|
||||
</button>
|
||||
</form>
|
||||
{% if openid.bluesky_handle %}
|
||||
<form action="" style="float:left;margin-left:20px">
|
||||
<div class="panel panel-tortin" style="width:132px;margin:0">
|
||||
<form action="" class="photo-card">
|
||||
<div class="panel panel-tortin">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-check"></i> {% trans "Bluesky" %}</h3>
|
||||
</div>
|
||||
@@ -71,14 +60,13 @@ outline: inherit;
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div style="height:8px"></div>
|
||||
<div class="action-buttons">
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}upload a new one{% endblocktrans %}</a>
|
||||
<a href="{% url 'import_photo' %}" class="button">{% blocktrans %}Import from other services{% endblocktrans %}</a>
|
||||
</div>
|
||||
|
||||
<div style="height:8px"></div>
|
||||
<form action="{% url 'assign_bluesky_handle_to_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
|
||||
<div style="margin-top: 2rem;">
|
||||
<form action="{% url 'assign_bluesky_handle_to_openid' view.kwargs.openid_id %}" method="post">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
|
||||
{% if openid.bluesky_handle %}
|
||||
@@ -90,7 +78,4 @@ outline: inherit;
|
||||
<button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:40px"></div>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -1,72 +1,85 @@
|
||||
/* lato-300 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-family: "Lato";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../fonts/lato-v15-latin-300.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Light'), local('Lato-Light'),
|
||||
url('../fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/LatoLatin-Light.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/LatoLatin-Light.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/LatoLatin-Light.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
src: url("../fonts/lato-v15-latin-300.eot"); /* IE9 Compat Modes */
|
||||
src: local("Lato Light"), local("Lato-Light"),
|
||||
url("../fonts/LatoLatin-Light.eot?#iefix") format("embedded-opentype"),
|
||||
/* IE6-IE8 */ url("../fonts/LatoLatin-Light.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("../fonts/LatoLatin-Light.woff")
|
||||
format("woff"),
|
||||
/* Modern Browsers */ url("../fonts/LatoLatin-Light.ttf") format("truetype"),
|
||||
/* Safari, Android, iOS */ url("../fonts/LatoLatin-Light.svg#Lato")
|
||||
format("svg"); /* Legacy iOS */
|
||||
}
|
||||
/* lato-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-family: "Lato";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/lato-v15-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Regular'), local('Lato-Regular'),
|
||||
url('../fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/LatoLatin-Regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/LatoLatin-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/LatoLatin-Regular.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
src: url("../fonts/lato-v15-latin-regular.eot"); /* IE9 Compat Modes */
|
||||
src: local("Lato Regular"), local("Lato-Regular"),
|
||||
url("../fonts/LatoLatin-Regular.eot?#iefix") format("embedded-opentype"),
|
||||
/* IE6-IE8 */ url("../fonts/LatoLatin-Regular.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("../fonts/LatoLatin-Regular.woff")
|
||||
format("woff"),
|
||||
/* Modern Browsers */ url("../fonts/LatoLatin-Regular.ttf")
|
||||
format("truetype"),
|
||||
/* Safari, Android, iOS */ url("../fonts/LatoLatin-Regular.svg#Lato")
|
||||
format("svg"); /* Legacy iOS */
|
||||
}
|
||||
/* lato-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-family: "Lato";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/lato-v15-latin-700.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Bold'), local('Lato-Bold'),
|
||||
url('../fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/LatoLatin-Bold.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/LatoLatin-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/LatoLatin-Bold.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
src: url("../fonts/lato-v15-latin-700.eot"); /* IE9 Compat Modes */
|
||||
src: local("Lato Bold"), local("Lato-Bold"),
|
||||
url("../fonts/LatoLatin-Bold.eot?#iefix") format("embedded-opentype"),
|
||||
/* IE6-IE8 */ url("../fonts/LatoLatin-Bold.woff2") format("woff2"),
|
||||
/* Super Modern Browsers */ url("../fonts/LatoLatin-Bold.woff")
|
||||
format("woff"),
|
||||
/* Modern Browsers */ url("../fonts/LatoLatin-Bold.ttf") format("truetype"),
|
||||
/* Safari, Android, iOS */ url("../fonts/LatoLatin-Bold.svg#Lato")
|
||||
format("svg"); /* Legacy iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/open-sans-v16-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Open Sans Regular'), local('OpenSans-Regular'),
|
||||
url('../fonts/open-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/open-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/open-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
|
||||
src: url("../fonts/open-sans-v16-latin-regular.eot"); /* IE9 Compat Modes */
|
||||
src: local("Open Sans Regular"), local("OpenSans-Regular"),
|
||||
url("../fonts/open-sans-v16-latin-regular.eot?#iefix")
|
||||
format("embedded-opentype"),
|
||||
/* IE6-IE8 */ url("../fonts/open-sans-v16-latin-regular.woff2")
|
||||
format("woff2"),
|
||||
/* Super Modern Browsers */ url("../fonts/open-sans-v16-latin-regular.woff")
|
||||
format("woff"),
|
||||
/* Modern Browsers */ url("../fonts/open-sans-v16-latin-regular.ttf")
|
||||
format("truetype"),
|
||||
/* Safari, Android, iOS */
|
||||
url("../fonts/open-sans-v16-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 27px;
|
||||
color: #4b77f2;
|
||||
letter-spacing: 0.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 70px;
|
||||
color: #fff;
|
||||
letter-spacing: 0.2rem;
|
||||
@@ -76,14 +89,14 @@ h1 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h2 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 27px;
|
||||
color: #4b77f2;
|
||||
letter-spacing: 0.05rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
h3 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 24px;
|
||||
margin-bottom: 2rem;
|
||||
color: #545454;
|
||||
@@ -94,7 +107,7 @@ h3 {
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
color: #4b77f2;
|
||||
@@ -105,16 +118,19 @@ p {
|
||||
font-size: 20px;
|
||||
}
|
||||
a {
|
||||
color: #335ECF;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #335ecf;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:active, a:visited, a:focus {
|
||||
color: #335ECF;
|
||||
a:hover,
|
||||
a:active,
|
||||
a:visited,
|
||||
a:focus {
|
||||
color: #335ecf;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.hero h2 {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
@@ -126,12 +142,19 @@ a:hover, a:active, a:visited, a:focus {
|
||||
padding-top: 2rem;
|
||||
font-size: 20px;
|
||||
color: #525252;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
position: relative;
|
||||
}
|
||||
.hero {
|
||||
height: 46rem;
|
||||
background-image: linear-gradient(to right, #335ecf, #296bd3, #2577d7, #2a82d8, #368dd9);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#335ecf,
|
||||
#296bd3,
|
||||
#2577d7,
|
||||
#2a82d8,
|
||||
#368dd9
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-size: auto;
|
||||
background-size: contain;
|
||||
@@ -141,7 +164,7 @@ a:hover, a:active, a:visited, a:focus {
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
background: url(/static/design_media/libravatar_header.svg);
|
||||
background-position-y: 0%;
|
||||
width: 100%;
|
||||
@@ -171,8 +194,8 @@ a:hover, a:active, a:visited, a:focus {
|
||||
}
|
||||
}
|
||||
.hero .btn {
|
||||
background-color: #5488E6;
|
||||
border: solid 2px #D5DFF9;
|
||||
background-color: #5488e6;
|
||||
border: solid 2px #d5dff9;
|
||||
border-radius: 4px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
@@ -180,15 +203,15 @@ a:hover, a:active, a:visited, a:focus {
|
||||
margin-right: 2rem;
|
||||
height: 5rem;
|
||||
min-width: 12rem;
|
||||
color:#FFFFFF;
|
||||
color: #ffffff;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
-ms-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.hero .btn:hover {
|
||||
background-color: #ADC0E1AD;
|
||||
border: solid 2px #D5DFF9;
|
||||
background-color: #adc0e1ad;
|
||||
border: solid 2px #d5dff9;
|
||||
border-radius: 4px;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
@@ -203,18 +226,25 @@ transition: all 0.3s;
|
||||
min-height: calc(100vh - 16rem);
|
||||
}
|
||||
footer {
|
||||
background-image: linear-gradient(to right, #335ecf, #296bd3, #2577d7, #2a82d8, #368dd9);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#335ecf,
|
||||
#296bd3,
|
||||
#2577d7,
|
||||
#2a82d8,
|
||||
#368dd9
|
||||
);
|
||||
background-size: auto;
|
||||
height: 16rem;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
footer::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
background: url(/static/design_media/libravatar_header.svg);
|
||||
background-position-y: 0%;
|
||||
width: 100%;
|
||||
@@ -245,30 +275,35 @@ footer {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.left { grid-area: left; }
|
||||
.middle { grid-area: middle; }
|
||||
.right { grid-area: right; }
|
||||
.left {
|
||||
grid-area: left;
|
||||
}
|
||||
.middle {
|
||||
grid-area: middle;
|
||||
}
|
||||
.right {
|
||||
grid-area: right;
|
||||
}
|
||||
|
||||
.main-content-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'left middle right';
|
||||
grid-template-areas: "left middle right";
|
||||
grid-gap: 5rem;
|
||||
padding: 10px;
|
||||
}
|
||||
@media only screen and (max-width: 1212px) {
|
||||
.main-content-container {
|
||||
grid-template-areas:
|
||||
'left left'
|
||||
'middle right';
|
||||
"left left"
|
||||
"middle right";
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 620px) {
|
||||
.main-content-container {
|
||||
grid-template-areas:
|
||||
'left'
|
||||
'middle'
|
||||
'right';
|
||||
"left"
|
||||
"middle"
|
||||
"right";
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 55px;
|
||||
@@ -287,7 +322,7 @@ footer {
|
||||
-webkit-box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41);
|
||||
-moz-box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41);
|
||||
box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41);
|
||||
border: solid 1px #335ECF29;
|
||||
border: solid 1px #335ecf29;
|
||||
}
|
||||
.left {
|
||||
flex: 1;
|
||||
@@ -311,14 +346,14 @@ footer {
|
||||
}
|
||||
.button {
|
||||
background-color: #fff;
|
||||
color: #335ECF;
|
||||
color: #335ecf;
|
||||
padding: 0.5rem 1.6rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
width: auto;
|
||||
border: solid #335ECF 1px;
|
||||
border: solid #335ecf 1px;
|
||||
border-radius: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 600;
|
||||
@@ -329,31 +364,32 @@ footer {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #335ECF;
|
||||
color: #FFF;
|
||||
background-color: #335ecf;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
#contribute {
|
||||
border: solid 1px #335ECF;
|
||||
border: solid 1px #335ecf;
|
||||
font-size: 20px;
|
||||
width: 26rem;
|
||||
color: #335ECF;
|
||||
color: #335ecf;
|
||||
}
|
||||
.open > .dropdown-toggle.btn-primary:hover {
|
||||
color: #fff;
|
||||
background-color: #5588e6;
|
||||
border-color: #335ECF;
|
||||
border-color: #335ecf;
|
||||
}
|
||||
|
||||
.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
|
||||
.btn-primary.active,
|
||||
.btn-primary:active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
color: #fff !important;
|
||||
background-color: #5588e6 !important;
|
||||
border-color: #FFFFFF26 !important;
|
||||
border-color: #ffffff26 !important;
|
||||
}
|
||||
.btn-group {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1122px) {
|
||||
.hero {
|
||||
height: 34rem;
|
||||
@@ -411,7 +447,8 @@ transition: all 0.3s;
|
||||
#page .container #home-form {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.btn-group, .btn-group-vertical {
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
display: contents;
|
||||
}
|
||||
#contribute {
|
||||
@@ -419,7 +456,7 @@ transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
#contribute:hover {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
}
|
||||
label {
|
||||
font-size: 18px;
|
||||
@@ -451,9 +488,21 @@ header {
|
||||
|
||||
.navbarlibravatar {
|
||||
background: #335ecf; /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, #335ecf 0%, #368dd9 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, #335ecf 0%,#368dd9 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, #335ecf 0%,#368dd9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
background: -moz-linear-gradient(
|
||||
-45deg,
|
||||
#335ecf 0%,
|
||||
#368dd9 100%
|
||||
); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(
|
||||
-45deg,
|
||||
#335ecf 0%,
|
||||
#368dd9 100%
|
||||
); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#335ecf 0%,
|
||||
#368dd9 100%
|
||||
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#335ecf', endColorstr='#368dd9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
||||
border-radius: unset;
|
||||
color: #fff;
|
||||
@@ -464,7 +513,9 @@ border:0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbarlibravatar .navbar-nav > li > a:hover, .navbarlibravatar .navbar-nav > li > a:focus, .navbarlibravatar .navbar-nav > .open > a {
|
||||
.navbarlibravatar .navbar-nav > li > a:hover,
|
||||
.navbarlibravatar .navbar-nav > li > a:focus,
|
||||
.navbarlibravatar .navbar-nav > .open > a {
|
||||
background-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
.navbarlibravatar .dropdown-menu {
|
||||
@@ -472,10 +523,10 @@ background-color:#327fd6;
|
||||
border: 0;
|
||||
}
|
||||
.navbarlibravatar .navbar-right .dropdown-menu {
|
||||
background-color:#368DD9;
|
||||
background-color: #368dd9;
|
||||
}
|
||||
.navbarlibravatar .dropdown-menu > li > a {
|
||||
color:#FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navbarlibravatar .dropdown-menu > li > a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
@@ -501,32 +552,52 @@ background-color:rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Firefox < 16 */
|
||||
@-moz-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Safari, Chrome and Opera > 12.1 */
|
||||
@-webkit-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Internet Explorer */
|
||||
@-ms-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Opera < 12.1 */
|
||||
@-o-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
@@ -539,11 +610,23 @@ background-color:rgba(0,0,0,0.2);
|
||||
}
|
||||
.panel-heading {
|
||||
background: #335ecf; /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, #335ecf 0%, #368dd9 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, #335ecf 0%,#368dd9 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, #335ecf 0%,#368dd9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
background: -moz-linear-gradient(
|
||||
-45deg,
|
||||
#335ecf 0%,
|
||||
#368dd9 100%
|
||||
); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(
|
||||
-45deg,
|
||||
#335ecf 0%,
|
||||
#368dd9 100%
|
||||
); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#335ecf 0%,
|
||||
#368dd9 100%
|
||||
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#335ecf', endColorstr='#368dd9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
||||
color:#FFFFFF;
|
||||
color: #ffffff;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
}
|
||||
@@ -551,7 +634,7 @@ border-top-right-radius:16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.panel-title a {
|
||||
color:#FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
.unconfirmed-mail-form {
|
||||
display: inline-block;
|
||||
@@ -573,13 +656,14 @@ color:#FFFFFF;
|
||||
|
||||
#id_export_file + label {
|
||||
font-weight: 600;
|
||||
color: color: #335ECF;
|
||||
color: #335ecf;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#id_export_file:focus + label,
|
||||
#id_export_file + label:hover {
|
||||
color: #335ecf;
|
||||
}
|
||||
|
||||
#id_photo {
|
||||
@@ -593,13 +677,14 @@ color:#FFFFFF;
|
||||
|
||||
#id_photo + label {
|
||||
font-weight: 600;
|
||||
color: color: #335ECF;
|
||||
color: #335ecf;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#id_photo:focus + label,
|
||||
#id_photo + label:hover {
|
||||
color: #335ecf;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
@@ -613,7 +698,7 @@ color:#FFFFFF;
|
||||
.form-control {
|
||||
border-width: 2px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-transition: all 0.3s;
|
||||
@@ -624,33 +709,48 @@ border-color:rgba(51,94,207,0.5);
|
||||
background: none;
|
||||
}
|
||||
.form-control:hover {
|
||||
border-color:rgba(51,94,207,0.75)
|
||||
border-color: rgba(51, 94, 207, 0.75);
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: rgb(51, 94, 207);
|
||||
box-shadow: none;
|
||||
}
|
||||
.checkbox input, .radio input {display:none}
|
||||
.checkbox input + label, .radio input + label {
|
||||
.checkbox input,
|
||||
.radio input {
|
||||
display: none;
|
||||
}
|
||||
.checkbox input + label,
|
||||
.radio input + label {
|
||||
padding-left: 0;
|
||||
}
|
||||
.checkbox input + label:before, .radio input + label:before {
|
||||
.checkbox input + label:before,
|
||||
.radio input + label:before {
|
||||
font-family: FontAwesome;
|
||||
display: inline-block;
|
||||
letter-spacing: 5px;
|
||||
font-size: 20px;
|
||||
color:#335ECF;
|
||||
color: #335ecf;
|
||||
}
|
||||
.checkbox input + label:before {
|
||||
content: "\f0c8";
|
||||
}
|
||||
.checkbox input:checked + label:before {
|
||||
content: "\f14a";
|
||||
}
|
||||
.radio input + label:before {
|
||||
content: "\f10c";
|
||||
}
|
||||
.radio input:checked + label:before {
|
||||
content: "\f192";
|
||||
}
|
||||
.checkbox input + label:before {content: "\f0c8"}
|
||||
.checkbox input:checked + label:before {content: "\f14a"}
|
||||
.radio input + label:before {content: "\f10c"}
|
||||
.radio input:checked + label:before {content: "\f192"}
|
||||
|
||||
@media only screen and (max-width: 470px) {
|
||||
.navbar-nav .open .dropdown-menu > li > a {
|
||||
color: #fff;
|
||||
}
|
||||
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
|
||||
.nav .open > a,
|
||||
.nav .open > a:focus,
|
||||
.nav .open > a:hover {
|
||||
background-color: #eeeeee40;
|
||||
border-color: #337ab7;
|
||||
color: #fff;
|
||||
@@ -662,7 +762,8 @@ color:#335ECF;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
.btn-group, .btn-group-vertical {
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@@ -731,7 +832,7 @@ color:#335ECF;
|
||||
}
|
||||
}
|
||||
.profile-container {
|
||||
border-top: solid 5px #2F95EDB3;
|
||||
border-top: solid 5px #2f95edb3;
|
||||
display: grid;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
@@ -739,7 +840,8 @@ color:#335ECF;
|
||||
.profile-container img {
|
||||
margin: 0.5em;
|
||||
}
|
||||
.panel-body.profile > div, .panel-body.profile > img {
|
||||
.panel-body.profile > div,
|
||||
.panel-body.profile > img {
|
||||
text-align: left;
|
||||
}
|
||||
.panel-heading.profile {
|
||||
@@ -751,17 +853,21 @@ color:#335ECF;
|
||||
color: #353535;
|
||||
font-weight: bold;
|
||||
}
|
||||
.profile-container > ul > li > a, .profile-container button{
|
||||
.profile-container > ul > li > a,
|
||||
.profile-container button {
|
||||
color: #353535;
|
||||
text-decoration: none;
|
||||
}
|
||||
.profile-container.active {
|
||||
border-top: solid 5px #335ECF;
|
||||
border-top: solid 5px #335ecf;
|
||||
}
|
||||
.profile-container ul > li > button:hover, .profile-container ul > li > a:hover{
|
||||
color: #335ECF;
|
||||
.profile-container ul > li > button:hover,
|
||||
.profile-container ul > li > a:hover {
|
||||
color: #335ecf;
|
||||
}
|
||||
.email-profile {
|
||||
grid-area: email;
|
||||
}
|
||||
.email-profile { grid-area: email; }
|
||||
.profile-container {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
@@ -789,8 +895,8 @@ color:#335ECF;
|
||||
.profile-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'img email email email email email'
|
||||
'img list list list list list';
|
||||
"img email email email email email"
|
||||
"img list list list list list";
|
||||
grid-gap: 0;
|
||||
grid-template-columns: 20% 80%;
|
||||
}
|
||||
@@ -799,7 +905,8 @@ color:#335ECF;
|
||||
grid-template-columns: 40% 60%;
|
||||
}
|
||||
}
|
||||
.profile-container > div, profile-container > img {
|
||||
.profile-container > div,
|
||||
profile-container > img {
|
||||
text-align: center;
|
||||
}
|
||||
.profile-container.active > img {
|
||||
@@ -813,7 +920,7 @@ color:#335ECF;
|
||||
}
|
||||
}
|
||||
.profile-container > ul {
|
||||
display:none
|
||||
display: none;
|
||||
}
|
||||
.profile-container.active > ul {
|
||||
display: block;
|
||||
@@ -865,3 +972,71 @@ h3.panel-title{
|
||||
color: #353535;
|
||||
background-color: #3582d71f;
|
||||
}
|
||||
|
||||
/* Photo assignment page styles */
|
||||
.nobutton {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.photo-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.photo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-card {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.photo-card .panel {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.action-buttons {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons .button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.action-buttons .button {
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user