Merge pull request #18 from Clayder/feature/melhorias-layout

Feature/melhorias layout
Clayder · Jun 30, 2019 · 12d077e · 12d077e
2 parents 33c3f97 + a90487c
commit 12d077e
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 153 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,13 @@
+div.my-row, div.my-div{
+    margin-bottom: 20px;
+}
+
+div.tabela{
+    min-width: 50px;
+    max-width: 1200px;
+    overflow-x: auto
+}
+
+i{
+    font-size: 20px;
+}
diff --git a/public/js/App/index.js b/public/js/App/index.js
@@ -79,8 +79,8 @@ function montarLinha(contato) {
             <td>${complemento}</td>
             <td>${contato.uf}</td>
             <td>
-                <a type="button" href="/contato/${contato.id}/edit" class="btn btn-info btn-lg">
-                  <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+                <a type="button" title="Clique aqui para visualizar o contato" href="/contato/${contato.id}/edit" class="btn btn-info btn-lg">
+                  <i class="fas fa-user"></i>
                 </a>
             </td>
         </tr>
@@ -98,7 +98,7 @@ function getItem(data, i) {
     let active = (i == data.current_page) ? "class='active'" : "";
     return `
         <li ${active}>
-            <a href="#" pagina="${i}">${i}</a>
+            <a href="javascript:void(0);" pagina="${i}">${i}</a>
         </li>
     `;
 }
@@ -116,7 +116,7 @@ function getItemAnterior(data) {
         let i = data.current_page - 1;
         return `
             <li>
-                <a href="#" pagina="${i}" aria-label="Previous">
+                <a href="javascript:void(0);" pagina="${i}" aria-label="Previous">
                     <span aria-hidden="true">«</span>
                 </a>
             </li>
@@ -138,7 +138,7 @@ function getItemProximo(data) {
         let i = data.current_page + 1;
         return `
             <li>
-                <a href="#" pagina="${i}" aria-label="Next">
+                <a href="javascript:void(0);" pagina="${i}" aria-label="Next">
                     <span aria-hidden="true">»</span>
                 </a>
             </li>

diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{csrf_token()}}">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>@yield("titulo")</title>
+
+    <!-- Bootstrap -->
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}" />
+    <script src="https://kit.fontawesome.com/683d3262aa.js"></script>
+    <script type="text/javascript"> (function () {
+            var css = document.createElement('link');
+            css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css';
+            css.rel = 'stylesheet';
+            css.type = 'text/css';
+            document.getElementsByTagName('head')[0].appendChild(css);
+        })(); </script>
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+</head>
+<body>
+<div class="container" style="margin-top: 30px; padding: 20px">
+    @section("menu-topo")
+        <nav class="navbar navbar-default">
+            <div class="container-fluid">
+                <!-- Brand and toggle get grouped for better mobile display -->
+                <div class="navbar-header">
+                    <a class="navbar-brand btn-lg" href="/" title="Listagem de contatos">
+                        <i class="fas fa-address-book text-primary"></i>
+                        <span class="text-primary">Listar Contatos</span>
+                    </a>
+                </div>
+
+                <!-- Collect the nav links, forms, and other content for toggling -->
+                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                    <ul class="nav navbar-nav">
+                    </ul>
+                </div><!-- /.navbar-collapse -->
+            </div><!-- /.container-fluid -->
+        </nav>
+    @show
+    @yield("conteudo")
+</div>
+
+<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<!-- Include all compiled plugins (below), or include individual files as needed -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+        crossorigin="anonymous"></script>
+@yield("js")
+</body>
+</html>
diff --git a/resources/views/create.blade.php b/resources/views/create.blade.php
@@ -1,37 +1,17 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="csrf-token" content="{{csrf_token()}}">
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <title>Contatos</title>
+@extends("app")
 
-    <!-- Bootstrap -->
-    <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-    <script src="https://kit.fontawesome.com/683d3262aa.js"></script>
-    <script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
+@section("titulo", "Cadastrar contato")
 
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
-</head>
-<body>
-<div class="container" style="margin-top: 30px; padding: 20px">
+@section("conteudo")
     <div class="row">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <h3 class="panel-title"><i class="fas fa-user-plus"></i> Cadastrar Contato</h3>
             </div>
             <div class="panel-body">
                 @if(session('msg') || session('msgError'))
-                    <div class="alert alert-{{ session('msg') ? "success" : "danger" }} alert-dismissible fade in" role="alert">
+                    <div class="alert alert-{{ session('msg') ? "success" : "danger" }} alert-dismissible fade in"
+                         role="alert">
                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                             <span aria-hidden="true">×</span>
                         </button>
@@ -66,15 +46,17 @@
                             <span class="text-danger">*</span>
                             <span class="fa fa-spinner fa-spin spinner-endereco" style="display: none"></span>
                         </label>
-                        <input type="text" class="form-control" id="rua" name="logradouro" value="{{ old('logradouro') }}">
+                        <input type="text" class="form-control" id="rua" name="logradouro"
+                               value="{{ old('logradouro') }}">
                         <span class="help-block msg-endereco">{{ $errors->first('logradouro') }}</span>
                     </div>
                     <div class="form-group div-endereco">
                         <label class="control-label">
                             Complemento
                             <span class="fa fa-spinner fa-spin spinner-endereco" style="display: none"></span>
                         </label>
-                        <input type="text" class="form-control" id="complemento" name="complemento" value="{{ old('complemento') }}">
+                        <input type="text" class="form-control" id="complemento" name="complemento"
+                               value="{{ old('complemento') }}">
                         <span class="help-block msg-endereco">{{ $errors->first('complemento') }}</span>
                     </div>
                     <div class="form-group div-endereco {{ $errors->has('bairro') ? 'has-error' : ''}}">
@@ -92,7 +74,8 @@
                             <span class="text-danger">*</span>
                             <span class="fa fa-spinner fa-spin spinner-endereco" style="display: none"></span>
                         </label>
-                        <input type="text" class="form-control" id="cidade" name="localidade" value="{{ old('localidade') }}">
+                        <input type="text" class="form-control" id="cidade" name="localidade"
+                               value="{{ old('localidade') }}">
                         <span class="help-block msg-endereco">{{ $errors->first('localidade') }}</span>
                     </div>
                     <div class="form-group div-endereco {{ $errors->has('uf') ? 'has-error' : ''}}">
@@ -105,19 +88,14 @@
                         <span class="help-block msg-endereco">{{ $errors->first('uf') }}</span>
                     </div>
 
-                    <button type="submit" class="btn btn-success" id="btn-submit"><i class="fas fa-plus"></i> Cadastrar</button>
+                    <button type="submit" class="btn btn-success btn-lg" id="btn-submit"><i class="fas fa-plus"></i> Cadastrar
+                    </button>
                 </form>
             </div>
         </div>
     </div>
-</div>
+@endsection
 
-<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-<!-- Include all compiled plugins (below), or include individual files as needed -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
-        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
-        crossorigin="anonymous"></script>
-<script src="{{asset('js/App/ViaCep.js')}}" type="text/javascript"></script>
-</body>
-</html>
+@section("js")
+    <script src="{{asset('js/App/ViaCep.js')}}" type="text/javascript"></script>
+@endsection