listing dragons button style changed

Author: jmurowaniecki

README.md

@@ -142,6 +142,8 @@ Este exemplo utiliza as bibliotecas [pizzicato de alemangui](https://github.com/
 
 As imagens foram extraídas de [PNG find](https://www.pngfind.com/) em sua maioria como licença Creative Commons ou uso particular, e foram em parte reconstituídas e modificadas artisticamente para se adequar ao design preservando a arte original.
 
+Icon **list** made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/).
+
 Inspiração no trabalho artístico de Diablo - UI e OST -, Rhapsody of Fire e **D&D / d⚂20**.
 
 Nenhum plugin foi utilizado para os efeitos de paralax nos dragões - _nenhum dragão foi ferido fora dos tabuleiros_.

web/src/app/app.component.ts

@@ -11,6 +11,12 @@ export class AppComponent implements AfterViewInit {
   title = 'Librum ex Dracones';
 
   ngAfterViewInit() {
+    try {
+      screen.orientation.lock('portrait');
+    } catch (e) {
+      console.log('Fail to bind orientation', e);
+    }
+
     this.fx.preLoad(() => {
       this.openCurtains();
       this.fx.playBackground();
@@ -24,13 +30,10 @@ export class AppComponent implements AfterViewInit {
     }, 666);
   }
 
-
   constructor(private router: Router, private fx: SoundService) {
-
     router.events.subscribe((event) => {
       // ..
       return event;
     });
-
   }
 }

web/src/app/screen/pannel/sidebar/sidebar.component.html

@@ -14,8 +14,22 @@
 
   <button
     (click)="sounds.preLoaded.action[1].play()"
-    class="button round dragon-face" [routerLink]="['/admin']">
-    <img src="/assets/image/dragoneye.png" title="More Dragons" alt="Open modal of Dragons!">
+    class="button round dragon-face"
+    [routerLink]="['/admin']">
+    <svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"  title="More Dragons" alt="Open modal of Dragons!">
+        <path d="m409.92 34.205h-70.263c-3.354-9.93-12.752-17.102-23.8-17.102h-26.098c-7.921-10.652-20.468-17.103-33.76-17.103s-25.839 6.451-33.76 17.102h-26.098c-11.048 0-20.446 7.172-23.8 17.102h-70.263c-18.566 0-33.67 15.105-33.67 33.67v410.46c0 18.566 15.105 33.67 33.67 33.67h307.84c18.566 0 33.67-15.105 33.67-33.67v-410.46c1e-3 -18.566-15.104-33.67-33.669-33.67zm-222.86 8.037c0-7e-3 1e-3 -0.014 1e-3 -0.02v-0.011c5e-3 -5.005 4.078-9.075 9.085-9.075h30.397c2.854 0 5.493-1.517 6.929-3.985 4.781-8.213 13.204-13.117 22.532-13.117s17.751 4.904 22.532 13.117c1.435 2.467 4.075 3.985 6.929 3.985h30.397c4.999 0 9.067 4.059 9.085 9.055 0 0.011-1e-3 0.02-1e-3 0.031 0 0.021 3e-3 0.042 3e-3 0.062v26.126h-137.89v-26.168zm240.5 436.09c0 9.725-7.912 17.637-17.637 17.637h-307.84c-9.725 0-17.637-7.912-17.637-17.637v-410.46c0-9.725 7.912-17.637 17.637-17.637h68.944v26.188c0 4.427 3.589 8.017 8.017 8.017h153.92c4.427 0 8.017-3.589 8.017-8.017v-26.188h68.944c9.725 0 17.637 7.912 17.637 17.637v410.46z"/>
+        <path d="m256.09 34.205h-0.086c-4.427 0-7.974 3.589-7.974 8.017 0 4.427 3.632 8.017 8.059 8.017s8.017-3.589 8.017-8.017-3.589-8.017-8.016-8.017z"/>
+        <path d="m401.37 68.409h-34.206c-4.427 0-8.017 3.589-8.017 8.017s3.589 8.017 8.017 8.017h26.189v377.32h-274.71v-377.32h26.19c4.427 0 8.017-3.589 8.017-8.017s-3.589-8.017-8.017-8.017h-34.207c-4.427 0-8.017 3.589-8.017 8.017v393.35c0 4.427 3.589 8.017 8.017 8.017h290.74c4.427 0 8.017-3.589 8.017-8.017v-393.35c-1e-3 -4.427-3.59-8.017-8.017-8.017z"/>
+        <path d="m204.69 171.02c-4.427 0-8.017 3.589-8.017 8.017 0 9.725-7.912 17.637-17.637 17.637s-17.637-7.912-17.637-17.637 7.912-17.637 17.637-17.637c4.427 0 8.017-3.589 8.017-8.017s-3.589-8.017-8.017-8.017c-18.566 0-33.67 15.105-33.67 33.67s15.105 33.67 33.67 33.67 33.67-15.105 33.67-33.67c1e-3 -4.427-3.589-8.016-8.016-8.016z"/>
+        <path d="m204.69 265.09c-4.427 0-8.017 3.589-8.017 8.017 0 9.725-7.912 17.637-17.637 17.637s-17.637-7.912-17.637-17.637 7.912-17.637 17.637-17.637c4.427 0 8.017-3.589 8.017-8.017s-3.589-8.017-8.017-8.017c-18.566 0-33.67 15.105-33.67 33.67s15.105 33.67 33.67 33.67 33.67-15.105 33.67-33.67c1e-3 -4.427-3.589-8.016-8.016-8.016z"/>
+        <path d="m358.61 282.19h-119.72c-4.427 0-8.017 3.589-8.017 8.017s3.589 8.017 8.017 8.017h119.72c4.427 0 8.017-3.589 8.017-8.017s-3.59-8.017-8.017-8.017z"/>
+        <path d="m324.41 247.98h-85.511c-4.427 0-8.017 3.589-8.017 8.017s3.589 8.017 8.017 8.017h85.511c4.427 0 8.017-3.589 8.017-8.017s-3.589-8.017-8.017-8.017z"/>
+        <path d="m358.61 188.12h-119.72c-4.427 0-8.017 3.589-8.017 8.017s3.589 8.017 8.017 8.017h119.72c4.427 0 8.017-3.589 8.017-8.017s-3.59-8.017-8.017-8.017z"/>
+        <path d="m324.41 153.92h-85.511c-4.427 0-8.017 3.589-8.017 8.017s3.589 8.017 8.017 8.017h85.511c4.427 0 8.017-3.589 8.017-8.017s-3.589-8.017-8.017-8.017z"/>
+        <path d="m204.69 359.15c-4.427 0-8.017 3.589-8.017 8.017 0 9.725-7.912 17.637-17.637 17.637s-17.637-7.912-17.637-17.637 7.912-17.637 17.637-17.637c4.427 0 8.017-3.589 8.017-8.017s-3.589-8.017-8.017-8.017c-18.566 0-33.67 15.105-33.67 33.67 0 18.566 15.105 33.67 33.67 33.67s33.67-15.105 33.67-33.67c1e-3 -4.426-3.589-8.016-8.016-8.016z"/>
+        <path d="m358.61 376.25h-119.72c-4.427 0-8.017 3.589-8.017 8.017 0 4.427 3.589 8.017 8.017 8.017h119.72c4.427 0 8.017-3.589 8.017-8.017-1e-3 -4.428-3.59-8.017-8.017-8.017z"/>
+        <path d="m324.41 342.05h-85.511c-4.427 0-8.017 3.589-8.017 8.017s3.589 8.017 8.017 8.017h85.511c4.427 0 8.017-3.589 8.017-8.017s-3.589-8.017-8.017-8.017z"/>
+    </svg>
   </button>
 
   <button

web/src/app/screen/pannel/sidebar/sidebar.component.sass

@@ -28,3 +28,9 @@
         display: block
         max-height: 400px
         overflow: hidden scroll !important
+
+    svg
+        transform: scale(0.5)
+        path
+            stroke: rgba(200, 200, 100, 1)
+            fill: rgba(255, 255, 250, 1)

web/src/manifest.webmanifest

@@ -4,6 +4,7 @@
     "theme_color": "#424242",
     "background_color": "#131313",
     "display": "fullscreen",
+    "orientation": "portrait",
     "scope": "./",
     "start_url": "./",
     "icons": [{

web/src/styles.sass

@@ -23,7 +23,7 @@ p
     min-height: 60px
     border: 2px solid rgba(13, 13, 13, 0.2)
     border-radius: 5px
-    background: rgba(0, 0, 0, .5) !important
+    background-color: rgba(0, 0, 0, .5) !important
     align-content: center
     text-align: center
     color: rgba(255, 255, 255, .9)
@@ -41,7 +41,7 @@ p
 .input:focus,
 .button.selected
     color: rgba(200, 0, 0, 1)
-    background: #000000ce !important
+    background-color: #000000ce !important
     // /* linear-gradient(to bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0,.8) 80%, rgba(0, 0, 0, .8) 80%, rgba(0, 0, 0, 0) 100%) !important */
     border-color: rgba(100, 0, 0, .6)
     text-shadow: 0 10px 20px rgba(100, 0, 0, 1)