From f3e9671b1aa5da952ba77fff3be0a4f092e62bc1 Mon Sep 17 00:00:00 2001
From: rainydaysavings <eliseuamaro@pm.me>
Date: Fri, 26 Jun 2020 21:46:40 +0100
Subject: [PATCH] [UI] Work started on profile settings page.

---
 public/assets/css/settings/settings.css       |  69 +++++++++++
 public/assets/css/settings/settings_mid.css   | 112 ++++++++++++++++++
 public/assets/css/settings/settings_small.css |  69 +++++++++++
 templates/settings/profile.html.twig          |  36 +++++-
 4 files changed, 283 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/css/settings/settings.css
 create mode 100644 public/assets/css/settings/settings_mid.css
 create mode 100644 public/assets/css/settings/settings_small.css

diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
new file mode 100644
index 0000000000..7e6bbf5e18
--- /dev/null
+++ b/public/assets/css/settings/settings.css
@@ -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;
+}
\ No newline at end of file
diff --git a/public/assets/css/settings/settings_mid.css b/public/assets/css/settings/settings_mid.css
new file mode 100644
index 0000000000..604e885343
--- /dev/null
+++ b/public/assets/css/settings/settings_mid.css
@@ -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;
+}
\ No newline at end of file
diff --git a/public/assets/css/settings/settings_small.css b/public/assets/css/settings/settings_small.css
new file mode 100644
index 0000000000..4066911c57
--- /dev/null
+++ b/public/assets/css/settings/settings_small.css
@@ -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;
+}
\ No newline at end of file
diff --git a/templates/settings/profile.html.twig b/templates/settings/profile.html.twig
index 947c5a7ee3..72474bb78d 100644
--- a/templates/settings/profile.html.twig
+++ b/templates/settings/profile.html.twig
@@ -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 %}