Merge pull request #459 from gobstones/fix-scroll-vertical

Fix scroll vertical
gobstones · Nov 3, 2021 · aa02bd6 · aa02bd6
2 parents 37f0bd3 + dd11f16
commit aa02bd6
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 5 deletions.
diff --git a/app/elements/gobstones-teacher/alert-banner.html b/app/elements/gobstones-teacher/alert-banner.html
@@ -10,6 +10,10 @@
         white-space: normal;
       }
 
+      .closed {
+        display: none;
+      }
+
       .flash-error {
         background-color: #fdebe9;
         border-color: #ff818266;
@@ -45,13 +49,44 @@
       .flash-success iron-icon {
         color: #1e7f37;
       }
+
+      .flash-close {
+        float: right;
+        padding: 16px;
+        margin: -16px;
+        text-align: center;
+        cursor: pointer;
+        background: none;
+        border: 0;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+      }
+
+      .flash-close iron-icon {
+        height: 16px;
+      }
+
+      .flash-close iron-icon:hover {
+        opacity: .7;
+      }
     </style>
-    <div class$="{{cssClass(level)}}">
+
+    <iron-localstorage
+      name="{{code}}"
+      value="{{closed}}"
+      on-iron-localstorage-load-empty="initialize"
+      on-iron-localstorage-load="showIfImportant">
+    </iron-localstorage>
+
+    <div class$="{{cssClass(level, closed)}}">
+      <button on-tap="close" aria-label="Close" class="flash-close" type="button">
+        <iron-icon icon="close"></iron-icon>
+      </button>
       <iron-icon icon="{{icon(level)}}"></iron-icon>
       <strong>{{ title }}</strong>
       <div>
         {{ message }}
-        <!-- Botones opcionales -->
       </div>
     </div>
   </template>
@@ -76,15 +111,32 @@
       is: "alert-banner",
       behaviors: [Polymer.LocalizationBehavior, Polymer.BusListenerBehavior],
       properties: {
+        code: String,
         title: String,
         message: String,
-        level: String
+        level: String,
+        closed: Boolean,
+      },
+      initialize() {
+        this.closed = false;
       },
-      cssClass(level) {
-        return `flash flash-${level}`;
+      showIfImportant() {
+        // Ignore local storage setting if message is important
+        if (this.isImportant()) {
+          this.closed = false;
+        }
+      },
+      cssClass(level, closed) {
+        return closed ? 'closed' : `flash flash-${level}`;
+      },
+      close() {
+        this.closed = true;
       },
       icon(level) {
         return LEVELS[level].icon;
+      },
+      isImportant() {
+        return this.level === 'warning' || this.level === 'error';
       }
     });
   </script>

diff --git a/app/elements/gobstones-teacher/gobstones-teacher.html b/app/elements/gobstones-teacher/gobstones-teacher.html
@@ -139,13 +139,15 @@
         <div class$="editor {{_teacherLibraryClass(selectedTab)}}">
           <template is="dom-if" if="{{!studentSolutionDirty}}">
             <alert-banner
+              code="define-primitives-here"
               title="Definí aquí las primitivas para tu actividad"
               message="Los procedimientos y funciones que definas podrán ser utilizados por tus estudiantes en sus soluciones."
               level="info"
             ></alert-banner>
           </template>
           <template is="dom-if" if="{{studentSolutionDirty}}">
             <alert-banner
+              code="student-code-changed"
               title="Realizaste cambios en la solución del estudiante"
               message="Si renombrás o eliminás alguna primitiva que está en uso, deberás actualizar manualmente la solución del estudiante."
               level="warning"