Commit ec09f160 authored by Claudio Valerio's avatar Claudio Valerio

widget resized to avoid scrollbars, and some wording

parent 553c99df
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
id="http://www.njin.fr/sankore/apps/memory" id="http://www.njin.fr/sankore/apps/memory"
version="1.0" version="1.0"
width="820" width="820"
height="575" height="670"
ub:resizable="true"> ub:resizable="true">
<name>Memory</name> <name>Memory</name>
......
#table { #table {
display: table; display: table;
text-align: center; text-align: center;
} }
#table > div { #table > div {
display: table-row; display: table-row;
} }
#table > div > div { #table > div > div {
display: table-cell; display: table-cell;
} }
.card-container { .card-container {
padding: 20px 10px; padding: 20px 10px;
} }
.switch { .switch {
display: none; display: none;
color: #FFF; color: #FFF;
} }
.onEdit .switch { .onEdit .switch {
display: block; display: block;
} }
.onEdit .front .switch { .onEdit .front .switch {
visibility: hidden; visibility: hidden;
} }
.card { .card {
position: relative; position: relative;
white-space: normal; white-space: normal;
width: 180px; width: 180px;
height: 180px; height: 180px;
overflow: hidden; overflow: hidden;
-webkit-border-radius: 8px; -webkit-border-radius: 8px;
-moz-border-radius: 8px; -moz-border-radius: 8px;
-ms-border-radius: 8px; -ms-border-radius: 8px;
border-radius: 8px; border-radius: 8px;
}
.front{
height: 100%;
} }
.front .card { .front .card {
background: url("images/pile-bg.png") center no-repeat, url("images/mark.png") center no-repeat; background: url("images/pile-bg.png") center no-repeat, url("images/mark.png") center no-repeat;
} }
.back .card { .back .card {
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); -webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); -moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
-ms-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); -ms-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
box-shadow: 0 1px 3px rgba(0,0,0, 0.65); box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -webkit-gradient( background-image: -webkit-gradient(
linear, linear,
50% top, 50% top,
50% bottom, 50% bottom,
color-stop(0, rgb(255,255,255)), color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(204,204,204)) color-stop(1, rgb(204,204,204))
); );
} }
.card > div { .card > div {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
width: 180px; width: 180px;
height: 180px; height: 180px;
} }
.card .text { .card .text {
padding: 0px 20px; padding: 0px 20px;
font-family: "SFToontimeRegular"; font-family: "SFToontimeRegular";
font-size: 28px; font-size: 28px;
color: #000; color: #000;
} }
.usePicture .card .text, .front .card .text { .usePicture .card .text, .front .card .text {
display: none; display: none;
} }
.card .picture { .card .picture {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
-webkit-border-radius: 8px; -webkit-border-radius: 8px;
-moz-border-radius: 8px; -moz-border-radius: 8px;
-ms-border-radius: 8px; -ms-border-radius: 8px;
border-radius: 8px; border-radius: 8px;
} }
.usePicture .card .picture { .usePicture .card .picture {
display: block; display: block;
} }
.card .picture > div { .card .picture > div {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
-webkit-border-radius: 8px; -webkit-border-radius: 8px;
-moz-border-radius: 8px; -moz-border-radius: 8px;
-ms-border-radius: 8px; -ms-border-radius: 8px;
border-radius: 8px; border-radius: 8px;
} }
.card .picture > div:first-child { .card .picture > div:first-child {
position: relative; position: relative;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
width: 180px; width: 180px;
height: 180px; height: 180px;
} }
.card .picture > div img { .card .picture > div img {
max-width: 100%; max-width: 100%;
vertical-align: middle; max-height: 100%;
vertical-align: middle;
} }
.card .picture > div.dropzone { .card .picture > div.dropzone {
border: 1px dashed black; border: 1px dashed black;
display: none; display: none;
} }
.onEdit .card .picture > div.dropzone { .onEdit .card .picture > div.dropzone {
display: block; display: block;
} }
.card .picture > div.dropzone div { .card .picture > div.dropzone div {
padding: 10px 10px 10px 50px; padding: 10px 10px 10px 50px;
text-align: left; text-align: left;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat; background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat;
-webkit-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0; -ms-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
.card .picture > div.dropzone.hover div { .card .picture > div.dropzone.hover div {
background-image: url("images/drop-label-ondrop-bg.png"); background-image: url("images/drop-label-ondrop-bg.png");
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.card-container .actions { .card-container .actions {
position: relative; position: relative;
margin-top: -35px; margin-top: -35px;
display: none; display: none;
color: #FFF; color: #FFF;
} } /*here!!!!!!!!!*/
.onEdit .card-container .actions { .onEdit .card-container .actions {
display: block; display: none;
} }
.actions button[role="flip"] { .actions button[role="flip"] {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
cursor: pointer; cursor: pointer;
width: 50px; width: 50px;
height: 50px; height: 50px;
background: url("images/flip.png") left center no-repeat; background: url("images/flip.png") left center no-repeat;
text-indent: -99999px; text-indent: -99999px;
} }
.card-container { .card-container {
-webkit-perspective: 600px; /*-webkit-perspective: 600px;*/
position: relative; position: relative;
width: 180px; width: 180px;
height: 180px; height: 180px;
} }
.onEdit .card-container { .onEdit .card-container {
height: 200px; height: 200px;
} }
.cards { .cards {
position: relative; position: relative;
width:100%; width:100%;
height: 100%; height: 100%;
overflow: hidden;
} }
.cards > div { .cards > div {
position: absolute; float: left;
} }
.csstransforms3d .cards > div { .csstransforms3d .cards > div {
-webkit-transform-style: preserve-3d; -webkit-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out; /*-webkit-backface-visibility: hidden;*/
-webkit-backface-visibility: hidden;
} }
.csstransforms3d .cards > div:first-child { .csstransforms3d .cards > div:first-child {
-webkit-transform: rotateY( 0deg ); /*-webkit-transform: rotateY( 0deg );*/
} }
.no-csstransforms3d .cards > div:first-child { .no-csstransforms3d .cards > div:first-child {
display: block; display: block;
} }
.csstransforms3d .cards > div:last-child { .csstransforms3d .cards > div:last-child {
-webkit-transform: rotateY( -180deg ); /* -webkit-transform: rotateY( -180deg );*/
} }
.no-csstransforms3d .cards > div:last-child { .no-csstransforms3d .cards > div:last-child {
display: none; display: none;
} }
.csstransforms3d .cards.flip > div:first-child { .csstransforms3d .cards.flip > div:first-child {
-webkit-transform: rotateY( 180deg ); height: 0;
-webkit-transition-property: height;
-webkit-transition-duration: 0.5s;
/*transition-timing-function: ease;*/
} }
.no-csstransforms3d .cards.flip > div:first-child { .no-csstransforms3d .cards.flip > div:first-child {
display: none; display: none;
} }
.csstransforms3d .cards.flip > div:last-child { .csstransforms3d .cards.flip > div:last-child {
-webkit-transform: rotateY( 0deg ); /*-webkit-transform: rotateY( 0deg );*/
} }
.no-csstransforms3d .cards.flip > div:last-child { .no-csstransforms3d .cards.flip > div:last-child {
display: block; display: block;
} }
\ No newline at end of file
fr.njin.i18n.document.title = Memory fr.njin.i18n.document.title = Memory
fr.njin.i18n.toolbar.edit = Display fr.njin.i18n.toolbar.edit = Edit
fr.njin.i18n.toolbar.view = Close fr.njin.i18n.toolbar.view = Display
fr.njin.i18n.toolbar.reload = Reload fr.njin.i18n.toolbar.reload = Reload
fr.njin.i18n.toolbar.help = Help fr.njin.i18n.toolbar.help = Help
...@@ -16,4 +16,4 @@ fr.njin.i18n.memory.parameters.label.timeout = Timeout ...@@ -16,4 +16,4 @@ fr.njin.i18n.memory.parameters.label.timeout = Timeout
fr.njin.i18n.memory.label.usePicture = Image fr.njin.i18n.memory.label.usePicture = Image
fr.njin.i18n.memory.label.drop = Drag and drop here fr.njin.i18n.memory.label.drop = Drag and drop here
fr.njin.i18n.memory.action.flip = Flip fr.njin.i18n.memory.action.flip = Flip
\ No newline at end of file
...@@ -5,7 +5,7 @@ fr.njin.i18n.toolbar.view = Afficher ...@@ -5,7 +5,7 @@ fr.njin.i18n.toolbar.view = Afficher
fr.njin.i18n.toolbar.reload = Recharger fr.njin.i18n.toolbar.reload = Recharger
fr.njin.i18n.toolbar.help = Aide fr.njin.i18n.toolbar.help = Aide
fr.njin.i18n.parameters.label.themes = Thèmes fr.njin.i18n.parameters.label.themes = Thème
fr.njin.i18n.parameters.label.slate.themes = ardoise fr.njin.i18n.parameters.label.slate.themes = ardoise
fr.njin.i18n.parameters.label.pad.themes = tablette fr.njin.i18n.parameters.label.pad.themes = tablette
fr.njin.i18n.parameters.label.none.themes = aucun fr.njin.i18n.parameters.label.none.themes = aucun
...@@ -16,4 +16,4 @@ fr.njin.i18n.memory.parameters.label.timeout = Délai ...@@ -16,4 +16,4 @@ fr.njin.i18n.memory.parameters.label.timeout = Délai
fr.njin.i18n.memory.label.usePicture = Utiliser une image fr.njin.i18n.memory.label.usePicture = Utiliser une image
fr.njin.i18n.memory.label.drop = Glisser une ressource ici fr.njin.i18n.memory.label.drop = Glisser une ressource ici
fr.njin.i18n.memory.action.flip = Tourner fr.njin.i18n.memory.action.flip = Tourner
\ No newline at end of file
...@@ -12,5 +12,5 @@ ...@@ -12,5 +12,5 @@
<li>éditer directement une carte.</li> <li>éditer directement une carte.</li>
</ul> </ul>
<p>Les cartes possèdent par défaut un champ texte. Pour insérer du texte, cliquez sur cette dernière et saisissez le texte désiré. Pour ajouter une image depuis votre bibliothèque, cochez la case “utiliser une image” et utilisez le glisser-déposer. Il faut au préalable retourner la carte avec le bouton bleu.</p> <p>Les cartes possèdent par défaut un champ texte. Pour insérer du texte, cliquez sur cette dernière et saisissez le texte désiré. Pour ajouter une image depuis votre bibliothèque, cochez la case “utiliser une image” et utilisez le glisser-déposer. Il faut au préalable retourner la carte avec le bouton bleu.</p>
<p>Attention, la paire de cartes doit être disposée en colonne lors de l'édition.</p>
<p>Les cartes sont disposées de manière aléatoire dans le mode jeu.</p> <p>Les cartes sont disposées de manière aléatoire dans le mode jeu.</p>
<p>L’App est capable d’identifier les écritures mathématiques équivalentes (signes autorisés : “+”, “*”, “-”, “/” et les parenthèses).</p>
\ No newline at end of file
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
xmlns:ub="http://uniboard.mnemis.com/widgets" xmlns:ub="http://uniboard.mnemis.com/widgets"
id="http://www.njin.fr/sankore/apps/tableur" id="http://www.njin.fr/sankore/apps/tableur"
version="1.0" version="1.0"
width="972" width="1050"
height="400" height="560"
ub:resizable="true"> ub:resizable="true">
<name>La boite à transformation</name> <name>La boite à transformation</name>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment