Front-end

DevFabi · Aug 15, 2020 · d7b49b9 · d7b49b9
1 parent 83475dc
commit d7b49b9
Show file tree

Hide file tree

Showing 17 changed files with 155 additions and 60 deletions.
diff --git a/public/css/dashboard.css b/public/css/dashboard.css
@@ -1,5 +1,24 @@
+@font-face {
+  font-family: 'Recursive';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/recursive/v20/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUvz2xbXfn1uEQadDck317tQ0.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 body {
   font-size: .875rem;
+  font-family: 'Raleway', sans-serif;
 }
 
 .feather {
@@ -101,3 +120,75 @@ body {
   border-color: transparent;
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
+
+#logo {
+  font-family: 'Recursive', sans-serif;
+  font-size: 40px;
+  text-decoration: none;
+  color: white;
+  border-bottom: 12px solid #F7C387;
+
+}
+
+#logo:hover {
+  text-decoration: none;
+}
+
+
+.ebnavbartop {
+  background-color: #F5AD80;
+  border-radius: 8px;
+  text-decoration: none;
+  color: white;
+  overflow: hidden;
+  padding: 20px;
+}
+.ebnavbartop ul{
+  float: right;
+}
+
+.ebnavbartop a{
+  float: left;
+  display: block;
+}
+
+
+.ebnavbarleft {
+  background-color: #EDC8C1;
+  border-radius: 8px;
+  line-height: 2;
+  min-height: 500px;
+}
+
+.eb-nav-link {
+  color: white;
+  font-size: 16px;
+}
+
+.eb-nav-link:hover {
+  color: #E09291;
+  text-decoration: none;
+}
+
+#eb-nav-title {
+  border-bottom:4px solid #E09291;
+  color: white;
+  font-size: 18px;
+  padding: 3px;
+  line-height: 3;
+  font-weight: bold;
+}
+
+#eb-nav-title:hover {
+  border-bottom:4px solid white;
+  color: #E09291;
+}
+
+.btn-pink {
+  background-color: #E09291;
+  color: white;
+}
+.btn-orange {
+  background-color: #F7C387;
+  color: white;
+}
diff --git a/templates/admin/author/create.html.twig b/templates/admin/author/create.html.twig
@@ -10,7 +10,7 @@
         {{ form_start(form) }}
         {{ form_widget(form) }}
 
-        <button name="submit" type="submit" class="btn btn-primary">Save</button>
+        <button name="submit" type="submit" class="btn btn-pink">Save</button>
         {{ form_end(form) }}
 
     </div>

diff --git a/templates/admin/author/edit.html.twig b/templates/admin/author/edit.html.twig
@@ -9,7 +9,7 @@
         {{ form_start(form) }}
         {{ form_widget(form) }}
 
-        <button name="submit" type="submit" class="btn btn-primary">Save</button>
+        <button name="submit" type="submit" class="btn btn-pink">Save</button>
         {{ form_end(form) }}
 
     </div>

diff --git a/templates/admin/author/index.html.twig b/templates/admin/author/index.html.twig
@@ -7,7 +7,7 @@
         <h1 class="my-5"> Author handler</h1>
 
         <a href="{{ path('admin_create_author') }}">
-            <button name="create" class="btn btn-outline-info">Create</button>
+            <button name="create" class="btn btn-pink">Create</button>
         </a>
 
         <div class="table-responsive">
@@ -25,7 +25,7 @@
             <td>{{ author.id }}</td>
             <td>{{ author.name }}</td>
             <td>
-                <a href="{{ path('admin_edit_author', { id : author.id }) }}" class="btn btn-primary"><i class="fas fa-edit"></i> Edit</a>
+                <a href="{{ path('admin_edit_author', { id : author.id }) }}" class="btn btn-orange"><i class="fas fa-edit"></i> Edit</a>
                 <form method="post" action="{{ path('admin_delete_author', { id : author.id }) }}" >
                     <button type="submit" class="btn btn-danger">
                         <input type="hidden" name="_method" value="DELETE">

diff --git a/templates/admin/book/create.html.twig b/templates/admin/book/create.html.twig
@@ -9,7 +9,7 @@
         {{ form_start(form) }}
         {{ form_widget(form) }}
 
-        <button name="submit" type="submit" class="btn btn-primary">Save</button>
+        <button name="submit" type="submit" class="btn btn-pink">Save</button>
         {{ form_end(form) }}
 
     </div>

diff --git a/templates/admin/book/edit.html.twig b/templates/admin/book/edit.html.twig
@@ -9,7 +9,7 @@
         {{ form_start(form) }}
         {{ form_widget(form) }}
 
-        <button name="submit" type="submit" class="btn btn-primary">Save</button>
+        <button name="submit" type="submit" class="btn btn-pink">Save</button>
         {{ form_end(form) }}
 
     </div>

diff --git a/templates/admin/book/index.html.twig b/templates/admin/book/index.html.twig
@@ -8,7 +8,7 @@
         <h1 class="my-5"> Book handler</h1>
 
         <a href="{{ path('admin_create_book') }}">
-            <button class="btn btn-outline-info">Create book</button>
+            <button class="btn btn-pink">Create book</button>
         </a>
         <div class="table-responsive">
         <table class="table table-hover">
@@ -29,7 +29,7 @@
             <td>{{ book.title }}</td>
             <td>{{ book.authors.name }}</td>
             <td>
-                <a href="{{ path('admin_edit_book', { id : book.id }) }}" class="btn btn-primary"><i class="fas fa-edit"></i> Edit </a>
+                <a href="{{ path('admin_edit_book', { id : book.id }) }}" class="btn btn-orange"><i class="fas fa-edit"></i> Edit </a>
                 <a href="{{ path('admin_delete_book', { id : book.id }) }}" class="btn btn-danger"><i class="fas fa-trash"></i> Delete</a>
             </td>
             </tr>

diff --git a/templates/admin/user/create.html.twig b/templates/admin/user/create.html.twig
@@ -10,7 +10,7 @@
         {{ form_start(form) }}
         {{ form_widget(form) }}
 
-        <button name="submit" type="submit" class="btn btn-primary">Save</button>
+        <button name="submit" type="submit" class="btn btn-pink">Save</button>
         {{ form_end(form) }}
 
     </div>

diff --git a/templates/admin/user/edit.html.twig b/templates/admin/user/edit.html.twig
@@ -10,7 +10,7 @@
         {{ form_start(form) }}
         {{ form_widget(form) }}
 
-        <button name="submit" type="submit" class="btn btn-primary">Save</button>
+        <button name="submit" type="submit" class="btn btn-pink">Save</button>
         {{ form_end(form) }}
 
     </div>

diff --git a/templates/admin/user/index.html.twig b/templates/admin/user/index.html.twig
@@ -7,7 +7,7 @@
         <h1 class="my-5"> Users handler</h1>
 
         <a href="{{ path('admin_create_user') }}">
-            <button class="btn btn-outline-info">Create</button>
+            <button class="btn btn-pink">Create</button>
         </a>
 
         <div class="table-responsive">
@@ -28,7 +28,7 @@
                         <td>{{ user.firstName }}</td>
                         <td>{{ user.lastName }}</td>
                         <td>
-                            <a href="{{ path('admin_edit_user', { id : user.id }) }}" class="btn btn-primary"><i class="fas fa-edit"></i> Edit</a>
+                            <a href="{{ path('admin_edit_user', { id : user.id }) }}" class="btn btn-orange"><i class="fas fa-edit"></i> Edit</a>
 {#                            <a href="{{ path('admin_delete_user', { id : user.id }) }}" class="btn btn-danger"><i class="fas fa-trash"></i> Delete</a>#}
                         </td>
                     </tr>

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+    <title>EnjoyBooks</title>
 {% block stylesheets %}
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
@@ -11,86 +12,88 @@
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 {% endblock %}
 <body>
-<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Enjoy books</a>
-    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+<div class="ebnavbartop">
+    <a class="col-md-3 col-lg-2 mr-0 px-3"<span id="logo"> Enjoybooks </span></a>
+    <button class="navbar-toggler position-absolute d-md-none" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
     <ul class="navbar-nav px-3">
-        <li class="nav-item text-nowrap">
+
     {% if app.user %}
-            <a class="nav-link" id="signout" href="{{ path('logout') }}">Sign out</a>
+        <li class="eb-nav-item text-nowrap">
+            <a class="eb-nav-link"  href="{{ path('logout') }}">Sign out</a>
+        </li>
         {% else %}
-            <a class="nav-link" href="{{ path('login') }}">Connexion</a>
-            <a class="nav-link" href="{{ path('register') }}">Register</a>
-    {% endif %}
+        <li class="eb-nav-item text-nowrap"></li>
+            <a class="eb-nav-link" href="{{ path('login') }}">Connexion</a>
         </li>
+        <li class="eb-nav-item text-nowrap"></li>
+            <a class="eb-nav-link" href="{{ path('register') }}">Register</a>
+        </li>
+    {% endif %}
+
     </ul>
-</nav>
+</div>
 <div class="container-fluid">
     <div class="row">
-        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
-            <div class="sidebar-sticky pt-3">
+        <nav class="col-md-3 col-lg-2 ebnavbarleft">
+            <div class="sidebarMenu">
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link active" href="#">
+                        <a class="eb-nav-link" href="{{ path('home') }}">
                             Home <span class="sr-only">(current)</span>
                         </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ path('author') }}">
+                    <li class="eb-nav-item">
+                        <a class="eb-nav-link" href="{{ path('author') }}">
                             Authors
                         </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ path('books') }}">
+                    <li class="eb-nav-item">
+                        <a class="eb-nav-link" href="{{ path('books') }}">
                             Books
                         </a>
                     </li>
                 </ul>
                 {% if app.user %}
-                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
-                    <span style="color: green">User</span>
-                    <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
-                        <span data-feather="plus-circle"></span>
-                    </a>
+                <h6>
+                    <span id="eb-nav-title">User</span>
+
                 </h6>
                 <ul class="nav flex-column mb-2">
 
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ path('profile') }}">
+                    <li class="eb-nav-item">
+                        <a class="eb-nav-link" href="{{ path('profile') }}">
                             My profile
                         </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ path('subscription' , {userId: app.user.getId()}) }}">
+                    <li class="eb-nav-item">
+                        <a class="eb-nav-link" href="{{ path('subscription' , {userId: app.user.getId()}) }}">
                             Subscriptions
                         </a>
                     </li>
                 </ul>
                 {% endif %}
 
                 {% if is_granted('ROLE_ADMIN') %}
-                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
-                        <span style="color: red">Administration</span>
-                        <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
-                            <span data-feather="plus-circle"></span>
-                        </a>
+                    <h6>
+                        <span id="eb-nav-title">Administration</span>
+
                     </h6>
                     <ul class="nav flex-column mb-2">
 
-                        <li class="nav-item">
-                            <a class="nav-link" href="{{ path('admin_book') }}">
+                        <li class="eb-nav-item">
+                            <a class="eb-nav-link" href="{{ path('admin_book') }}">
                                 Books
                             </a>
                         </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="{{ path('admin_author') }}">
+                        <li class="eb-nav-item">
+                            <a class="eb-nav-link" href="{{ path('admin_author') }}">
                                 Authors
                             </a>
                         </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="{{ path('admin_user') }}">
+                        <li class="eb-nav-item">
+                            <a class="eb-nav-link" href="{{ path('admin_user') }}">
                                 Users
                             </a>
                         </li>

diff --git a/templates/home.html.twig b/templates/home.html.twig
@@ -4,6 +4,6 @@
 
 {% block body %}
 
-    <h2> Welcome to enjoybooks !</h2>
+    <h2> Welcome to <span id=""> EnjoyBooks </span> !</h2>
 
 {% endblock %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
@@ -10,11 +10,11 @@
     </div>
 
     <div class="row">
-        <div class="col-md-3"></div>
-            <a href="{{ path('connect_google_start') }}" style="padding: 40px;">
-                <button type="button" class="btn btn-secondary btn-lg">Sign in with google</button>
+        <div class="col-md-4"></div>
+            <a href="{{ path('connect_google_start') }}">
+                <button type="button" class="btn btn-lg btn-google">Sign in with google</button>
             </a>
-        </div>
+
     </div>
 
     <form class="form-signin" method="post">
@@ -29,12 +29,13 @@
         <input type="hidden" name="_csrf_token"
                value="{{ csrf_token('authenticate') }}"
         >
-        <button class="btn btn-lg btn-primary btn-block" type="submit" id="submit" value="submit">
+        <button class="btn btn-lg btn-pink btn-block" type="submit" id="submit" value="submit">
             Sign in
         </button>
     </form>
 
     <a href="{{ path('register') }}">
-        <button class="btn btn-primary">Register</button>
+        <button class="btn btn-pink">Register</button>
     </a>
+</div>
 {% endblock %}
diff --git a/templates/security/registration.html.twig b/templates/security/registration.html.twig
@@ -9,7 +9,7 @@
         {{ form_start(form) }}
         {{ form_widget(form) }}
 
-        <button name="submit" type="submit" class="btn btn-primary">Save</button>
+        <button name="submit" type="submit" class="btn btn-pink">Save</button>
         {{ form_end(form) }}
 
     </div>

diff --git a/templates/subscription/formsubscription.html.twig b/templates/subscription/formsubscription.html.twig
@@ -10,6 +10,6 @@
     {{ form_start(subscriptionForm) }}
     {{ form_widget(subscriptionForm) }}
 
-    <button type="submit" class="btn btn-primary">Add</button>
+    <button type="submit" class="btn btn-pink">Add</button>
     {{ form_end(subscriptionForm) }}
 {% endblock %}