[UI] Work started on profile settings page.
This commit is contained in:
parent
6cf90954dd
commit
f3e9671b1a
|
@ -0,0 +1,69 @@
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* PAGES ------------------------------*/
|
||||||
|
.set-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
order: 2;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
background-color: #00000080;
|
||||||
|
padding: 1em 1em;
|
||||||
|
font-size: 0.7em;
|
||||||
|
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav li {
|
||||||
|
display: block;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #F6F6F6 !important;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav a {
|
||||||
|
color: #91B9D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav a:hover {
|
||||||
|
color: #F6F6F6;
|
||||||
|
transition: all 0.8s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* CONTENT ----------------------------*/
|
||||||
|
.content {
|
||||||
|
order: 3;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.40);
|
||||||
|
padding: 0 1em 1em 1em;
|
||||||
|
border-radius: 1em;
|
||||||
|
font-size: 0.65em;
|
||||||
|
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 2em;
|
||||||
|
list-style: disc;
|
||||||
|
}
|
|
@ -0,0 +1,112 @@
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* PAGES ------------------------------*/
|
||||||
|
.set-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
order: 2;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
background-color: #00000080;
|
||||||
|
padding: 1em 1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav li {
|
||||||
|
display: block;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #F6F6F6 !important;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav a {
|
||||||
|
color: #91B9D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav a:hover {
|
||||||
|
color: #F6F6F6;
|
||||||
|
transition: all 0.8s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/*-------------------------------------*/
|
||||||
|
.set-nav2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
order: 2;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
margin-top: 1em;
|
||||||
|
background-color: #00000080;
|
||||||
|
border-top-left-radius: 1em;
|
||||||
|
border-top-right-radius: 1em;
|
||||||
|
padding: 1em 1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav2 ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav2 li {
|
||||||
|
display: block;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav2 a {
|
||||||
|
color: #91B9D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav2 a:hover {
|
||||||
|
color: #F6F6F6;
|
||||||
|
transition: all 0.8s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CONTENT ----------------------------*/
|
||||||
|
.content {
|
||||||
|
order: 3;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.30);
|
||||||
|
padding: 1em 1em 1em 1em;
|
||||||
|
border-bottom-left-radius: 1em;
|
||||||
|
border-bottom-right-radius: 1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 2em;
|
||||||
|
list-style: disc;
|
||||||
|
}
|
|
@ -0,0 +1,69 @@
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* PAGES ------------------------------*/
|
||||||
|
.set-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
order: 2;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
background-color: #00000080;
|
||||||
|
padding: 1em 1em;
|
||||||
|
font-size: 0.7em;
|
||||||
|
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav li {
|
||||||
|
display: block;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #F6F6F6 !important;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav a {
|
||||||
|
color: #91B9D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.set-nav a:hover {
|
||||||
|
color: #F6F6F6;
|
||||||
|
transition: all 0.8s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* CONTENT ----------------------------*/
|
||||||
|
.content {
|
||||||
|
order: 3;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-left: 1%;
|
||||||
|
margin-right: 1%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.40);
|
||||||
|
padding: 0 1em 1em 1em;
|
||||||
|
border-radius: 1em;
|
||||||
|
font-size: 0.7em;
|
||||||
|
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 2em;
|
||||||
|
list-style: disc;
|
||||||
|
}
|
|
@ -1,9 +1,39 @@
|
||||||
{% extends 'base.html.twig' %}
|
{% extends 'base.html.twig' %}
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
{{ parent() }}
|
{{ parent() }}
|
||||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq.css') }}" media="screen and (min-width: 1300px)">
|
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}" media="screen and (min-width: 1300px)">
|
||||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_mid.css') }}" media="screen and (max-width: 1300px)">
|
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}" media="screen and (max-width: 1300px)">
|
||||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 600px)">
|
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}" media="screen and (max-width: 750px)">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block nav %}
|
||||||
|
<nav class='set-nav'>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_profile' %}active{% endif %}'>Settings</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Account</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class='set-nav2'>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_profile' %}active{% endif %}'>Profile</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Avatar</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Cover</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
|
Loading…
Reference in New Issue