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)}}'>
-
- Media Alt Text
+ Media Alt Text:
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"