Puliendo los modales de Como usar y Contacto

carlosmperilla · Nov 7, 2022 · d5f16d9 · d5f16d9
1 parent 4a1e1be
commit d5f16d9
Show file tree

Hide file tree

Showing 11 changed files with 281 additions and 329 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/cosas para hacer django proyecto stock.txt b/cosas para hacer django proyecto stock.txt
diff --git a/notas.txt b/notas.txt
diff --git a/requirements.txt b/requirements.txt
@@ -0,0 +1,6 @@
+asgiref==3.5.2
+Django==3.2.15
+Pillow==9.2.0
+pytz==2022.2.1
+sqlparse==0.4.2
+typing-extensions==4.3.0
diff --git a/stock - django.txt b/stock - django.txt
diff --git a/visualstock/db.sqlite3 b/visualstock/db.sqlite3
diff --git a/visualstock/mainapp/static/css/movil_styles.css b/visualstock/mainapp/static/css/movil_styles.css
@@ -232,6 +232,21 @@ main > section > .section__content > .section__description {
     font-size: 2.5rem;
 }
 
+/* HowToUse */
+
+.modal > .plain_panel > .section__description summary {
+    font-size: x-large;
+}
+
+.modal__contactMe > .plain_panel > .section__description h3 {
+    font-size: x-large;
+    padding: 5px;
+}
+
+.modal__howToUse > .plain_panel > .section__description details:last-child p:last-child {
+    margin-bottom: 0;
+}
+
 @media screen and (max-width: 600px) {
     /* Title dialog modal */
     .d--modal > .plain_panel > .section__title {

diff --git a/visualstock/mainapp/static/css/styles.css b/visualstock/mainapp/static/css/styles.css
@@ -590,7 +590,12 @@ footer > ul > li:hover > label {
     text-align: center;
 }
 
-.modal > .plain_panel > .section__description > h3 {
+.modal.modal__contactMe > .plain_panel > .section__description {
+    overflow-x: auto;
+}
+
+.modal__contactMe > .plain_panel > .section__description h3,
+.modal > .plain_panel > .section__description summary {
     font-size: 3em;
     font-family: sans-serif;
     font-weight: bold;
@@ -599,17 +604,50 @@ footer > ul > li:hover > label {
     text-align: left;
     color: var(--text_color);
     background-color: #ffb4002b;
+    padding-left: .5em;
+}
+
+.modal__contactMe > .plain_panel > .section__description h3 {
+    padding-right: 5em;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.modal__contactMe > .plain_panel > .section__description h3:first-child {
+    margin-top: 0;
+}
+
+.modal__contactMe > .plain_panel > .section__description .email--contact,
+.modal__contactMe > .plain_panel > .section__description a {
+    width: fit-content;
+    font-size: 2rem;
+    font-family: monospace;
+    font-weight: bold;
+    margin: 0 auto;
+    word-break: break-all;
+}
+
+.modal__contactMe > .plain_panel > .section__description .email--contact {
+    font-weight: normal;
+    margin-left: 0;
+    margin-top: 30px;
+    font-size: 1.8rem;
+    font-family: cursive;
+}
+
+.modal > .plain_panel > .section__description summary h3 {
+    display: inline;
 }
 
-.modal > .plain_panel > .section__description > h3 span {
+.modal > .plain_panel > .section__description summary h3 span {
     vertical-align: text-top;
 }
 
-.modal > .plain_panel > .section__description > h3 span.icon-eye {
+.modal > .plain_panel > .section__description summary h3 span.icon-eye {
     vertical-align: bottom;
 }
 
-.modal > .plain_panel > .section__description > h3 span.icon-add__stock {
+.modal > .plain_panel > .section__description summary h3 span.icon-add__stock {
     border: 2px solid var(--text_color);
     border-radius: 50%;
     display: inline-flex;
@@ -620,11 +658,11 @@ footer > ul > li:hover > label {
     font-weight: bold;
 }
 
-.modal__howToUse > .plain_panel > .section__description > ul {
+.modal__howToUse > .plain_panel > .section__description details ul {
     margin-bottom: 18px;
 }
 
-.modal__howToUse > .plain_panel > .section__description > ul > li {
+.modal__howToUse > .plain_panel > .section__description details ul > li {
     font-size: 2rem;
     font-weight: 500;
     font-family: sans-serif, Helvetica, Arial;
@@ -634,15 +672,15 @@ footer > ul > li:hover > label {
     margin-left: 1em;
 }
 
-.modal > .plain_panel > .section__description > p {
+.modal > .plain_panel > .section__description details p {
     margin-bottom: 20px;
 }
 
-.modal > .plain_panel > .section__description > p:last-child {
+.modal > .plain_panel > .section__description details p:last-child {
     margin-bottom: 0;
 }
 
-.modal__howToUse > .plain_panel > .section__description > p:last-child {
+.modal__howToUse > .plain_panel > .section__description details:last-child p:last-child {
     margin-bottom: 50px;
 }
 

diff --git a/visualstock/mainapp/static/js/filter-interactive.js b/visualstock/mainapp/static/js/filter-interactive.js
@@ -1,3 +1,5 @@
+const contentTable = document.getElementsByClassName("content-table")[0];
+
 let dialogFilter = document.querySelector(".filter--modal");
 let formFilter = dialogFilter.querySelector(".form--filter");
 let checksInput = formFilter.querySelectorAll("input[type='checkbox']");
@@ -180,6 +182,9 @@ function closeDialogFilter(event){
     }
 }
 
+
+
+contentTable.style.paddingTop = "25px";
 dialogFilter.addEventListener('click', closeDialogFilter)
 
 for (let checkInput of checksInput) {

diff --git a/visualstock/mainapp/templates/mainapp/modals/modal_contactMe.html b/visualstock/mainapp/templates/mainapp/modals/modal_contactMe.html
@@ -7,6 +7,14 @@
     </label>
     <h2 class="section__title">Medios de contacto</h2>
     <div class="section__description" tabindex="1">
-        {% lorem 6 p %}
+        <h3>Puedes ver mis proyectos en desarrollo aquí:</h3>
+        <a href="https://github.com/carlosmperilla" target="_black">https://github.com/carlosmperilla</a>
+
+        <h3>Repositorio de este proyecto:</h3>
+        <a href="https://github.com/carlosmperilla/Visual-Stock" target="_black">https://github.com/carlosmperilla/Visual-Stock</a>
+
+        <span class="email--contact">
+            <strong>Correo: </strong>[email protected]
+        </span>
     </div>
 </div>