[UI] Work started on profile settings page.
This commit is contained in:
rainydaysavings
parent
6cf90954dd
commit
f3e9671b1a
GPG Key ID:
7D0C7EAFC9D835A0
|
|
@ -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' %}
|
||||
{% block stylesheets %}
|
||||
{{ 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/faq/faq_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.css') }}" media="screen and (min-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/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 %}
|
||||
|
||||
{% block body %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue