@mideind/netskrafl-react 1.0.0-beta.4 → 1.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mideind/netskrafl-react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "React UI for Netskrafl",
   "repository": {
     "type": "git",

package/src/css/glyphs.css

@@ -17,9 +17,9 @@
    font-family: 'Glyphicons Regular';
    /* The following source URLs are patched up at run-time
       to point to the backend server */
-   src: url('../fonts/glyphicons-regular.eot') format('embedded-opentype'),
-      url('../fonts/glyphicons-regular.woff') format('woff'),
-      url('../fonts/glyphicons-regular.ttf') format('truetype');
+   src: url('../static/glyphicons-regular.eot') format('embedded-opentype'),
+      url('../static/glyphicons-regular.woff') format('woff'),
+      url('../static/glyphicons-regular.ttf') format('truetype');
 }
 
 .glyphicon {

package/src/css/skrafl-explo.css

@@ -42,7 +42,7 @@ div.netskrafl-container {
   --triple-letter-color: hsl(from var(--svarkur-secondary) h 70% 40%); /* #21A4B6; */
   --chat-background: hsl(from var(--malfridur-secondary) h 65% 92%);
   --ok-button: var(--malfridur-green);
-  --cancel-button: hsl(from var(--logo-primary) h 70% 45%); /* #B6676D; */
+  --cancel-button: hsl(from var(--logo-primary) h 45% 55%); /* #B6676D; */
   --human-color: hsl(from var(--svarkur-secondary) h s 35%); /* #208C9F; */
   --list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%); /* #fff1d0; */
   --list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%); /* #ffc559; */
@@ -51,6 +51,7 @@ div.netskrafl-container {
   --tab-background: #f3f3f6;
   --header-background: #dde1e4;
   --two-letter-background:  hsl(from var(--malfridur-green) h 20% 90%);
+  --header-green:  hsl(from var(--malfridur-green) h 80% 35%);
   --dark-shadow: rgba(0, 0, 0, 0.5);
   --rack-shadow: #afb7cad0;
   --focus-border: var(--triple-word-color);
@@ -347,6 +348,8 @@ div.netskrafl-logo {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 32px;
+  height: 32px;
 }
 div.rightcol {
   position: relative;
@@ -611,7 +614,7 @@ div.tile.dragging {
     becomes a child of the document body element when dragging, and
     the style variables are not in scope at the body level. */
   box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
-  border-color: var(--ok-button);
+  border-color: #09814A; /* var(--ok-button); */
   border-radius: 5px;
   border-width: 3px;
   border-style: solid;
@@ -628,7 +631,7 @@ div.tile.dragging {
   box-sizing: content-box;
 }
 div.tile.dragging.no-drop {
-  border-color: var(--cancel-button);
+  border-color: #c07359; /* var(--cancel-button); */
 }
 .board td {
   min-width: 21px;
@@ -1991,7 +1994,7 @@ div#main-tabs > div[role=tabpanel] {
 div#main-tabs div.header-logo {
   padding-left: 14px;
   padding-right: 8px;
-  padding-top: 7px;
+  padding-top: 12px;
 }
 div#tabs {
   background-color: transparent;
@@ -2999,7 +3002,7 @@ div.reviewhdr {
   height: 18px;
   text-align: left;
   padding: 11px;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
   color: white;
   font-weight: 400;
   font-size: 18px;
@@ -3389,9 +3392,10 @@ div.scorediff {
   font-weight: normal;
   color: white;
   visibility: hidden;
-  padding-top: 3px;
+  padding-top: 2px;
   padding-bottom: 2px;
-  font-family: 'Open Sans', 'Arial', sans-serif;
+  font-family: var(--number-font);
+  border-radius: 5px;
 }
 div.posdiff {
   background-color: var(--ok-button);
@@ -3411,7 +3415,7 @@ div.navbtn {
   height: 30px;
   bottom: 136px;
   line-height: 24px;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
 }
 div.navbtn#navnext {
   position: absolute;
@@ -3542,12 +3546,12 @@ div#btn-cancel-no {
   top: auto;
   background-color: var(--ok-button);
 }
-.tabbed-page a:link,
-.tabbed-page a:visited {
+div.help-tabs .ui-tabs-panel a:link,
+div.help-tabs .ui-tabs-panel a:visited {
   text-decoration: none;
   color: var(--humangrad-color);
 }
-.tabbed-page a:hover {
+div.help-tabs .ui-tabs-panel a:hover {
   text-decoration: none;
   color: var(--triple-word-color);
 }
@@ -3993,13 +3997,16 @@ div#user-no-match span#search-prefix {
   font-weight: bold;
 }
 div.modal-close {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   font-size: 18px;
   font-weight: 700;
   color: white;
   margin: 0;
   padding: 6px;
-  padding-top: 9px;
   border-radius: 5px;
   cursor: pointer;
   position: absolute;
@@ -4009,6 +4016,9 @@ div.modal-close {
   right: 12px;
   top: auto;
 }
+div.modal-close span.glyphicon {
+  top: 0;
+}
 div#usr-info-close {
   width: 72px;
   /* Override */
@@ -4396,16 +4406,16 @@ div#user-unfriend {
   left: 180px;
   width: 280px;
   /* Override */
-  padding-top: 6px;
   border-style: solid;
   border-width: 2px;
   border-color: var(--ok-button);
   background-color: white;
   color: var(--ok-button);
-  line-height: 24px;
 }
 div#user-unfriend span.glyphicon-coffee-cup {
+  top: -1px;
   color: var(--triple-word-color);
+  margin-right: 8px;
 }
 div#user-cancel {
   right: 108px;
@@ -4658,11 +4668,8 @@ div.toggler div.option.x-small {
 div.toggler div.option.selected {
   background-color: var(--triple-letter-color);
 }
-div#fairplay-toggler div.option.selected {
-  background-color: var(--ok-button);
-}
-div#fairplay-toggler span.glyphicon-edit {
-  top: 0;
+div.toggler span.glyphicon {
+  top: 1px;
 }
 div #radioset {
   padding-top: 6px;
@@ -4685,11 +4692,11 @@ a.nodecorate:hover {
 }
 a.iconlink:link {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--malfridur-accent);
 }
 a.iconlink:visited {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--malfridur-accent);
 }
 a.iconlink:hover {
   text-decoration: none;
@@ -5053,7 +5060,7 @@ div.signup-header {
     border-width: 0;
     color: white;
     left: 441px;
-    background-color: var(--ok-button);
+    background-color: var(--human-color);
   }
   div.submitpass {
     top: 158px;
@@ -5268,6 +5275,10 @@ div.signup-header {
   div.logo {
     display: block;
   }
+  div.netskrafl-logo {
+    width: 46px;
+    height: 46px;
+  }
   div#main-tabs div.header-logo {
     display: none;
   }
@@ -5829,6 +5840,14 @@ div.signup-header {
   div.gamestats div.player.humancolor {
     color: white;
   }
+  div.gamestats div.player.left {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+  div.gamestats div.player.right {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
   div.scorewrapper {
     background-color: var(--humangrad-color);
     min-height: 32px;

package/src/mithril/components.ts

@@ -289,7 +289,7 @@ export const LeftLogo: Component = {
   view: () => m(".logo",
     m(m.route.Link,
       { href: '/main', class: "nodecorate" },
-      m(NetskraflLogoOnly, { width: 24, height: 46 })
+      m(NetskraflLogoOnly)
     )
   )
 };

package/src/mithril/main.ts

@@ -48,7 +48,7 @@ export const Main: ComponentFunc<IAttributes> = () => {
               href: "/page",
               class: "backlink"
             },
-            m(NetskraflLogoOnly, { width: 24, height: 46 })
+            m(NetskraflLogoOnly)
           )
         ),
         m("ul", [

package/src/mithril/page.ts

@@ -482,7 +482,7 @@ export class View implements IView {
     // The function assumes that 'this' is the current view object
     if (!html)
       return "";
-    return m("div",
+    return m("div.help-tabs",
       {
         oninit: (vnode) => { vnode.state.selected = tabNumber || 1; },
         oncreate: (vnode) => { makeTabs(this, id, createFunc, true, vnode); }
@@ -667,7 +667,7 @@ export class View implements IView {
                 ev.preventDefault();
                 view.showFriendCancel()
               },
-              [glyph("coffee-cup"), nbsp(), nbsp(), ts("Þú ert vinur Netskrafls!")], 10
+              [glyph("coffee-cup"), ts("Þú ert vinur Netskrafls!")], 10
             )
             :
             this.vwDialogButton("user-friend", ts("Gerast vinur"),

package/src/mithril/review.ts

@@ -68,7 +68,7 @@ export const vwReview = (view: IView): VnodeChildren => {
                   href: "/page",
                   class: "backlink"
                 },
-                m(NetskraflLogoOnly, { width: 24, height: 46 })
+                m(NetskraflLogoOnly)
               )
             )
           ),
@@ -420,7 +420,7 @@ const vwStatsReview = (view: IView): VnodeChildren => {
     [
       m("div", { style: { position: "relative", width: "100%" } },
         [
-          m(".player", { class: leftPlayerColor, style: { width: "50%" } },
+          m(".player.left", { class: leftPlayerColor, style: { width: "50%" } },
             m(".robot-btn.left",
               game.autoplayer[0] ?
                 [glyph("cog"), nbsp(), game.nickname[0]]
@@ -428,7 +428,7 @@ const vwStatsReview = (view: IView): VnodeChildren => {
                 game.nickname[0]
             )
           ),
-          m(".player", { class: rightPlayerColor, style: { width: "50%", "text-align": "right" } },
+          m(".player.right", { class: rightPlayerColor, style: { width: "50%", "text-align": "right" } },
             m(".robot-btn.right",
               game.autoplayer[1] ?
                 [glyph("cog"), nbsp(), game.nickname[1]]

package/src/mithril/rightcolumn.ts

@@ -266,7 +266,7 @@ export const RightColumn: ComponentFunc<IAttributes> = (initialVnode) => {
                 href: "/page",
                 class: "backlink"
               },
-              m(NetskraflLogoOnly, { width: 24, height: 46 })
+              m(NetskraflLogoOnly)
             )
           )
         ),