Cambios pre-release

CSS - Cambio el color default de los links - Cambios en elementos de home - Los botones de navegacion del slideshow ahora tienen borde blanco para que se puedan ver en algunos casos Template(home) - Creo una seccion con consejos o pistas para el uso de la app (gracias al codigo de https://css-tricks.com/quoting-in-html-quotations-citations-and-blockquotes/)
bashiron · Oct 14, 2022 · f6b8a40 · f6b8a40
1 parent c1f7a6a
commit f6b8a40
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 10 deletions.
diff --git a/threads/static/threads/base.css b/threads/static/threads/base.css
@@ -1,5 +1,6 @@
 :root {
   --article-color: rgb(174, 216, 217);
+  --trans-article-color: rgba(174, 216, 217, 0.74);
   --article-hover-color: rgb(226 233 255);
   --article-locked-color: rgb(106 138 139);
   --scrollbar-width: 20px;
@@ -17,6 +18,14 @@ body {
   margin-top: 5rem;
 }
 
+a {
+  color: #de3ce3;
+}
+
+a:hover {
+  color: #c43fc8;
+}
+
 #nav-space {
   width: 100%;
   height: 75px;
@@ -67,21 +76,33 @@ body {
 
 .home-container {
   position: absolute;
-  width: 700px;
+  width: 725px;
   top: 25%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   min-height: 80px;
 }
 
-.home-container form {
-
+.home-container p {
+  color: #8e4343;
+}
+
+.home-container form label {
+  font-weight: 500;
 }
 
 .home-container form input[type=url] {
+  margin-left: 8px;
   height: 50px;
   width: 500px;
+  border: 2px solid #362c5b;
+  border-radius: 27px;
+}
+
+.home-container form input[type=url]:hover {
+  border-color: #24a3a3;
 }
+
 .home-container form input[type=submit] {
   margin-left: 12px;
 }
@@ -93,17 +114,33 @@ body {
   width: 550px;
   margin-top: 25px;
   font-size: larger;
-  color: red;
 }
 
 .error-message p {
+  color: red;
   position: relative;
   text-align: center;
 }
 
-.home-container p {
-  /* position: absolute; */
+#hints {
+  position: relative;
+  float: right;
+  right: 310px;
+  width: 500px;
+  margin: 0;
+  background: #d2ebf0;
+  padding: 1em;
+  border-radius: 1em;
+  border: 3px dotted;
+}
 
+#hints figcaption,
+#hints blockquote {
+  margin: 1em;
+}
+
+blockquote li {
+  margin-bottom: 5px;
 }
 
 #base-tweet {
@@ -132,7 +169,6 @@ body {
 
 .base-text {
   overflow: auto;
-  word-break: break-all;
 }
 
 .base-text p {
@@ -203,6 +239,7 @@ body {
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
+  border: 2px solid white;
   border-radius: 0 3px 3px 0;
   user-select: none;
 }
@@ -217,8 +254,9 @@ body {
 }
 
 .prev:hover, .next:hover {
-  color: #713cb3;
-  background-color: var(--article-color);
+  color: rgba(113, 60, 179, 0.74);
+  border-color: var(--article-color);
+  background-color: var(--trans-article-color);
 }
 
 #sh-modal-media .prev:hover, #sh-modal-media .next:hover {

diff --git a/threads/templates/threads/home.html b/threads/templates/threads/home.html
@@ -13,4 +13,29 @@
             Un tweet raiz es un tweet que comienza una conversacion, y no es respuesta de otro tweet.</p>
         <p>Por limitaciones de la <a href="https://developer.twitter.com/en/docs/twitter-api/tweets/search/api-reference/get-tweets-search-recent" target="_blank">API</a> solo se pueden traer las conversaciones de un tweet no mas antiguo que 7 dias.</p>
     </div>
+    <figure id="hints">
+        <blockquote>
+            <ul>
+                <li>
+                    Haga click en una respuesta para abrir su conversacion.
+                </li>
+                <li>
+                    Y click de nuevo para cerrarla.
+                </li>
+                <li>
+                    Use las teclas <strong>A </strong> y <strong>D</strong> para navegar las imagenes <em>miniatura</em> de las respuestas.
+                </li>
+                <li>
+                    Revise el numero de respuestas (junto al icono) antes de intentar abrir una conversacion.
+                </li>
+            </ul>
+        </blockquote>
+        <figcaption>
+            &mdash; Consejos, <cite>Thread Reader</cite>  
+        </figcaption>
+    </figure>
+
+        {% comment %} <p>
+            Use las teclas <strong>A </strong> y <strong>D</strong> para navegar las imagenes miniatura de las respuestas.
+        </p> {% endcomment %}
 {% endblock content %}
diff --git a/threads/utils/mock_provider.py b/threads/utils/mock_provider.py
@@ -199,7 +199,7 @@ def level_data(json, kind='thread'):
             }
 
         case 'thread':
-            obj = json['data'][0]   # asumimos que eligiremos el primero porque si
+            obj = json['data'][0]   # asumimos que elegiremos el primero porque si
             user = json['includes']['users'][0]  # suponemos orden
             return {
                 'user_id': obj['author_id'],