diff --git a/package.json b/package.json index 242d7ae..c065091 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dependencies": { "hammerjs": "2.0.6", "konami": "^1.6.2", - "materia-widget-development-kit": "~3.0.0", + "materia-widget-development-kit": "^3.0.1", "modernizr-webpack-plugin": "^1.0.7" }, "license": "AGPL-3.0", diff --git a/src/creator.html b/src/creator.html index 792f507..acfd68b 100644 --- a/src/creator.html +++ b/src/creator.html @@ -16,7 +16,6 @@ - @@ -52,6 +51,7 @@

Front

Back

focus-me="face == 'front' && lastAction == ACTION_CREATE_NEW_CARD" ng-attr-tabindex='{{startingTabIndex + (face == "front" ? 0 : 2)}}'>
Front

Back

asset="cardFace.asset" ng-attr-tabindex='{{startingTabIndex + (face == "front" ? 0 : 2)}}'>
-
- + Front

Back

class="alert" ng-class="{hide : cardFace.text.length < 51 || !cardFace.asset }"> - Reduce your text to fit the card. + You may need to reduce your text to fit the card.
diff --git a/src/creator.scss b/src/creator.scss index 89c36f9..1c0db56 100644 --- a/src/creator.scss +++ b/src/creator.scss @@ -58,7 +58,9 @@ button { padding : 8px; width : 120px; border : none; - &:hover .descript { opacity: 1; } + &:hover .descript { + opacity: 1; + } .descript { position : absolute; font-size : 13px; @@ -137,12 +139,8 @@ body { perspective-origin : 50% 100%; li { margin : 0 0 15px 0; - height: 200px; transform-style : preserve-3d; - &.tall { - height: 230px; - } &.titles { height : 60px; @@ -159,6 +157,9 @@ body { height: auto; } &.card { + display: flex; + justify-content: space-between; + align-items: flex-start; &.ng-enter, &.ng-leave { transition : .5s cubic-bezier(0.190, 1.000, 0.220, 1.000) all; @@ -191,10 +192,12 @@ body { } } .face { - position : absolute; + display: block; + min-height: 200px; width : 400px; overflow-y : auto; overflow-x : hidden; + background : #fff; &:nth-child(3) { right : 0; } textarea, input { font-family: 'verdana'; @@ -208,34 +211,70 @@ body { } &#alt-text-input { width: 67%; - text-align: left; + margin: 5px 10px; padding: 0px 5px; - margin-left: 10px; + + text-align: left; + font-size: 0.8em; } } - textarea { height : 130px; } - input { height : 25px; } + .alt-text-container { + padding: 5px 10px; + color: #000; + font-size: 0.8em; + } + + .center { + position: relative; + margin-bottom: 10px; + text-align: center; + } + + .asset-container { + position: relative; + + .del-asset { + margin: 0; + padding: 5px; + } + } + + textarea { + height : 130px; + } + input { + height : 25px; + margin-bottom: 10px; + } audio { max-width : 400px; max-height : 110px; margin-top: 50px; } button { - bottom : 6px; + top : 0px; right : 10px; background : none; color : rgba(0,0,0,0.7); font-size : 22px; width : 30px; transition : all 200ms; + cursor : pointer; &:hover { color : #47303C; .descript { color : #47303C; } } .descript { top : 10px; - &.add { left : -125px; } - &.del { left : -105px; } + &.add { + right: 0; + } + &.del { + width: auto; + top: 30px; + right: 0; + text-align: right; + } } } img { @@ -243,14 +282,15 @@ body { max-height : 110px; } .alert { - position : absolute; - color : rgba(0,0,0,0.7); + display : block; font-size : 13px; - bottom : 17px; - left : 17px; - opacity : 1; + margin: 5px 0 10px 0; + padding: 0 15px; + color: #000; transition : all 200ms; - &.hide { opacity : 0; } + &.hide { + display: none; + } span { padding : 0 2px 0 0; font-size : 15px; @@ -264,8 +304,10 @@ body { margin-top : 13px; cursor: pointer; .descript { - top : 7px; - left : 40px; + top : 40px; + left : 0px; + width : auto; + text-align: left; color : rgba(255,255,255,0.6); } @@ -458,13 +500,6 @@ body { } } -.center { - text-align: center; - position: relative; - background : #FFF; - max-height: inherit; -} - .hidden { visibility: hidden; } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4590d83..929a652 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4739,10 +4739,10 @@ materia-widget-dependencies@0.2.0: resolved "https://registry.yarnpkg.com/materia-widget-dependencies/-/materia-widget-dependencies-0.2.0.tgz#ebec53a9c10991bacf8b8ea9d6dfba5cd40ed912" integrity sha512-eqab8DdPD0tzEicJWfgc/BJko/MSZarECmXENNwt4NUr757HCQJl7M+q70eXYO84Ssk3kHySTELgOTLES/FODg== -materia-widget-development-kit@~3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/materia-widget-development-kit/-/materia-widget-development-kit-3.0.0.tgz#266e7f2e3d774845838e25d1d775c93cd3f418fb" - integrity sha512-sybUgRn7BGUIyiLHecTrwMumZrFUI2kW7f/2+D9v7GiNCbJDPLqNA04KL38hiy69ISNhGcEgL17TVXsYf6QD0Q== +materia-widget-development-kit@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/materia-widget-development-kit/-/materia-widget-development-kit-3.0.1.tgz#16b48010d68c52a2382f117e628b714c5a2be47d" + integrity sha512-qVd9yzFPleu+FAYvboiA+EGvbP1e2GsVvhl4IG/YIxNXCvEtP7jZcCtpqXVY9p8piUPBAmxXY5E/NAS06iXRIw== dependencies: "@babel/core" "^7.22.17" "@babel/preset-env" "^7.20.2"