Styles ready 🚀

rafaelmv · Jun 28, 2017 · 864bcaa · 864bcaa
1 parent 6baf099
commit 864bcaa
Show file tree

Hide file tree

Showing 10 changed files with 541 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -130,7 +130,6 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/

diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ pip install -r requirements.txt
 
 Run migrations into your database:
 ```
-python mamange.py migrate
+python manange.py migrate
 ```
 
 Finally run the application with:

diff --git a/home/forms.py b/home/forms.py
@@ -7,7 +7,7 @@ class Meta:
         model = Number
         fields = ['phone_number']
         labels = {
-            'phone_number': 'Número de teléfono'
+            'phone_number': 'Número de teléfono (12 dígitos)'
         }
 
     def clean_phone_number(self):
@@ -16,4 +16,4 @@ def clean_phone_number(self):
 
 
 class MessageForm(forms.Form):
-    body_message = forms.CharField(label='Tu mensaje (12 dígitos)', max_length=153, required=False)
+    body_message = forms.CharField(label='Tu mensaje', max_length=153, required=False)
diff --git a/home/templates/base.html b/home/templates/base.html
@@ -1,16 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  {% load static from staticfiles %}
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>{{ title }}</title>
+
+  <link rel="stylesheet" href="{% static "css/lib/normalize.css" %}">
+  <link rel="stylesheet" href="{% static "css/base.css" %}">
 </head>
 <body>
-  {% block content %}{% endblock content %}
 
-  {% if user.is_authenticated %}
-    <a href="{% url "logout" %}">Cerrar Sesión</a>
-  {% endif %}
+  <section class="wrapper">
+    {% block content %}{% endblock content %}
+  </section>
+
+  <footer class="wrapper">
+    {% if user.is_authenticated %}
+      <a href="{% url "logout" %}" class="link">Cerrar Sesión</a>
+    {% endif %}
+  </footer>
 </body>
 </html>
diff --git a/home/templates/home/index.html b/home/templates/home/index.html
@@ -27,8 +27,8 @@ <h2>
     <p>{{ number.phone_number }}</p>
   {% endfor %}
 
-  <a href="{% url "home:new" %}">Agregar número</a> |
-  <a href="{% url "home:number_list" %}">Números actuales</a>
+  <a href="{% url "home:new" %}" class="link">Agregar número</a> |
+  <a href="{% url "home:number_list" %}" class="link">Números actuales</a>
 
 {% endblock content %}
 

diff --git a/home/templates/home/new_number.html b/home/templates/home/new_number.html
@@ -10,7 +10,7 @@ <h2>Agregar número telefónico</h2>
     <button type="submit">Agregar</button>
   </form>
 
-  <a href="{% url "home:hello" %}">Enviar mensaje</a> |
-  <a href="{% url "home:number_list" %}">Números actuales</a>
+  <a href="{% url "home:hello" %}" class="link">Enviar mensaje</a> |
+  <a href="{% url "home:number_list" %}" class="link">Números actuales</a>
 
 {% endblock content %}
diff --git a/home/templates/home/number_list.html b/home/templates/home/number_list.html
@@ -19,8 +19,8 @@ <h2>Números registrados</h2>
 
   {% endif %}
 
-    <a href="{% url "home:new" %}">Agregar número</a> |
-  <a href="{% url "home:hello" %}">Enviar mensaje</a>
+    <a href="{% url "home:new" %}" class="link">Agregar número</a> |
+  <a href="{% url "home:hello" %}" class="link">Enviar mensaje</a>
 
 
 {% endblock content %}
diff --git a/smsuela/settings.py b/smsuela/settings.py
@@ -97,5 +97,10 @@
 
 USE_TZ = True
 
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'static')
+]
+
 STATIC_URL = '/static/'
+
 STATIC_ROOT = 'staticfiles'
diff --git a/static/css/base.css b/static/css/base.css
@@ -0,0 +1,67 @@
+@import url('https://fonts.googleapis.com/css?family=Zilla+Slab:300,400');
+
+html {
+  font-family: 'Zilla Slab', serif;
+  font-size: 16px;
+}
+
+.wrapper {
+  width: 90%;
+  margin: 0 auto;
+}
+
+footer.wrapper {
+  margin-top: 1em;
+}
+
+section.wrapper {
+  margin-top: 3em;
+}
+
+section.wrapper form label {
+  width: 25%;
+  clear: right;
+  text-align: left;
+  padding: 0;
+}
+
+section.wrapper form input[type='text'], input[type='password'], label {
+  float: left;
+  width: 75%;
+  margin: 0 0 2em 0;
+  padding: 0;
+  border: none;
+}
+
+section.wrapper form input[type='text'], input[type='password'] {
+  border-bottom: 1px solid #9a9a9a;
+  outline: none;
+}
+
+section.wrapper form button[type='submit'] {
+  width: 100%;
+  outline: none;
+  border: none;
+  font-family: 'Zilla Slab', serif;
+  background-color: #e8e5e5;
+  height: 30px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-bottom: 1em;
+}
+
+section.wrapper .link {
+  text-decoration: none;
+  color: #0079ff;
+}
+
+footer.wrapper .link {
+  text-decoration: none;
+  color: #ff004e;
+}
+
+@media (min-width: 800px) {
+  .wrapper {
+    width: 25%;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -130,7 +130,6 @@ dist/ @@
     downloads/
     eggs/
     .eggs/
-    lib/
     lib64/
     parts/
     sdist/
@@ Expand Down @@