Aplicando CSS bootstrap

bcd29008 · Jun 14, 2018 · 3848575 · 3848575
1 parent 2376a01
commit 3848575
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 28 deletions.
diff --git a/app.py b/app.py
@@ -30,7 +30,7 @@
 def main():
     return render_template('index.html')
 
-@app.route('/inserir', methods=('GET', 'POST'))
+@app.route('/inserir/', methods=('GET', 'POST'))
 def inserir():
 
     if request.method == 'POST':
@@ -52,7 +52,7 @@ def inserir():
 
     return render_template('inserir.html', title='Adicionar contato')
 
-@app.route('/listar')
+@app.route('/listar/')
 def listar():
     # exemplo de uma lista estática - sem consultar DB
     # contatos = [
@@ -81,7 +81,7 @@ def listar():
     return render_template('listar.html', title='Listar', contatos=contatos)
 
 
-@app.route('/editar', methods=('GET', 'POST'))
+@app.route('/editar/', methods=('GET', 'POST'))
 def editar():
     if request.method == 'GET':
         cid = str(request.args.get('id'))

diff --git a/static/style.css b/static/style.css
@@ -1,5 +1,12 @@
-body            { background: #eee; }
+/* body            { background: #eee;}
 a, h1, h2       { color: #335da8; }
 .flash          { background: #cee5F5; padding: 0.5em;
                   border: 1px solid #aacbe2; }
-.error          { background: #f0d6d6; padding: 0.5em; }
+.error          { background: #f0d6d6; padding: 0.5em; } */
+/* 
+.page-header {
+    background-color: #137977;
+    /* margin-top: 0; */
+    /* padding: 20px 20px 20px 40px;
+    color: ghostwhite;
+} */
diff --git a/templates/base.html b/templates/base.html
@@ -2,17 +2,40 @@
 <html lang="pt_BR">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     {% if title %}
         <title>{{ title }}</title>
     {% else %}
         <title>BCD29008 - IFSC - São José</title>
     {% endif %}
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+
+<!-- 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">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
 </head>
 <body>
-<h1>Agenda de Contatos</h1>
-<div><a href="listar">Listar contatos</a> | <a href="inserir">Adicionar contato</a></div>
-<hr>
-{% block content %}{% endblock %}
+    <div class="container theme-showcase" role="main">
+        <div class="jumbotron">
+        <h1>Agenda de Contatos</h1>
+        </div>
+        <nav class="navbar navbar-default">
+                <div class="container">
+                  <div class="navbar-collapse collapse">
+                    <ul class="nav navbar-nav">
+                      <li><a href="/listar">Listar</a></li>
+                      <li><a href="/inserir">Adicionar contato</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </nav>
+        {% block content %}{% endblock %}
+    </div>
 </body>
 </html>
diff --git a/templates/editar.html b/templates/editar.html
@@ -1,12 +1,20 @@
 {% extends "base.html" %}
 {% block content %}
-  <h2>Editar contato</h2>
-  {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
-  <form action="{{ url_for('editar') }}" method=post>
-      <P>Nome:
-      <BR><input type=text name=nome value="{{ contato[0] }}" required>
-      <P>Email:
-      <BR><input type=text name=email value="{{ contato[1] }}" required>
-      <input type=submit value="Atualizar">
-  </form>
+  <div class="page-header">
+      <h1>Editar contato</h1>
+  </div>
+  <div class="col-sm-10">
+    {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
+    <form action="{{ url_for('editar') }}" method=post>      
+        <div class="form-group">
+            <label for="nome">Nome</label>
+            <input type="text" class="form-control" id="nome" value="{{ contato[0] }}" placeholder="Nome completo">
+        </div>
+        <div class="form-group">
+            <label for="email">Email</label>
+            <input type="email" class="form-control" value="{{ contato[1] }}" id="email" placeholder="Informe o endereço de email">
+        </div>
+        <button type=submit class="btn btn-primary">Atualizar</button>
+    </form>
+  </div>
 {% endblock %}
diff --git a/templates/inserir.html b/templates/inserir.html
@@ -1,12 +1,20 @@
 {% extends "base.html" %}
 {% block content %}
-  <h2>Adicionar contato</h2>
+<div class="page-header">
+    <h1>Adicionar contato</h1>
+</div>
+<div class="col-sm-10">
   {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
-  <form action="{{ url_for('inserir') }}" method=post>
-      <P>Nome:
-      <BR><input type=text name=nome required>
-      <P>Email:
-      <BR><input type=text name=email required>
-      <input type=submit value="Adicionar">
+  <form action="{{ url_for('inserir') }}" method=post>      
+      <div class="form-group">
+          <label for="nome">Nome</label>
+          <input type="text" class="form-control" id="nome" placeholder="Nome completo">
+      </div>
+      <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" class="form-control" id="email" placeholder="Informe o endereço de email">
+      </div>
+      <button type=submit class="btn btn-primary">Adicionar</button>
   </form>
+</div>
 {% endblock %}
diff --git a/templates/listar.html b/templates/listar.html
@@ -1,21 +1,29 @@
 {% extends "base.html" %}
 {% block content %}
-    <h2>Listar contato</h2>
-    <div>
-        <table>
+<div class="page-header">
+    <h1>Listar contato</h1>
+</div>
+    <div class="row">
+        <div class="col-md-10">
+        <table class="table table-striped">
+            <thead>
             <tr>
                 <th>id</th>
                 <th>Nome</th>
                 <th>email</th>
             </tr>
+            </thead>
+            <tbody>
             {% for pessoa in contatos %}
                 <tr>
                     <td><a href='/editar?id={{ pessoa.id }}'>{{ pessoa.id }}</a></td>
                     <td>{{ pessoa.nome }}</td>
                     <td>{{ pessoa.email }}</td>
                 </tr>
             {% endfor %}
+            </tbody>
         </table>
+        </div>
     </div>
 {% endblock %}