Commit ec09f160 authored by Claudio Valerio's avatar Claudio Valerio

widget resized to avoid scrollbars, and some wording

parent 553c99df
......@@ -4,7 +4,7 @@
id="http://www.njin.fr/sankore/apps/memory"
version="1.0"
width="820"
height="575"
height="670"
ub:resizable="true">
<name>Memory</name>
......
#table {
display: table;
text-align: center;
display: table;
text-align: center;
}
#table > div {
display: table-row;
display: table-row;
}
#table > div > div {
display: table-cell;
display: table-cell;
}
.card-container {
padding: 20px 10px;
padding: 20px 10px;
}
.switch {
display: none;
color: #FFF;
display: none;
color: #FFF;
}
.onEdit .switch {
display: block;
display: block;
}
.onEdit .front .switch {
visibility: hidden;
visibility: hidden;
}
.card {
position: relative;
white-space: normal;
width: 180px;
height: 180px;
overflow: hidden;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
position: relative;
white-space: normal;
width: 180px;
height: 180px;
overflow: hidden;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.front{
height: 100%;
}
.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 {
-webkit-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);
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: -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: -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: -webkit-gradient(
linear,
50% top,
50% bottom,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(204,204,204))
);
-webkit-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);
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: -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: -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: -webkit-gradient(
linear,
50% top,
50% bottom,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(204,204,204))
);
}
.card > div {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 180px;
height: 180px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 180px;
height: 180px;
}
.card .text {
padding: 0px 20px;
font-family: "SFToontimeRegular";
font-size: 28px;
color: #000;
padding: 0px 20px;
font-family: "SFToontimeRegular";
font-size: 28px;
color: #000;
}
.usePicture .card .text, .front .card .text {
display: none;
display: none;
}
.card .picture {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.usePicture .card .picture {
display: block;
display: block;
}
.card .picture > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.card .picture > div:first-child {
position: relative;
display: table-cell;
vertical-align: middle;
width: 180px;
height: 180px;
position: relative;
display: table-cell;
vertical-align: middle;
width: 180px;
height: 180px;
}
.card .picture > div img {
max-width: 100%;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.card .picture > div.dropzone {
border: 1px dashed black;
display: none;
border: 1px dashed black;
display: none;
}
.onEdit .card .picture > div.dropzone {
display: block;
display: block;
}
.card .picture > div.dropzone div {
padding: 10px 10px 10px 50px;
text-align: left;
color: rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
padding: 10px 10px 10px 50px;
text-align: left;
color: rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.card .picture > div.dropzone.hover div {
background-image: url("images/drop-label-ondrop-bg.png");
color: rgba(255, 255, 255, 1);
background-image: url("images/drop-label-ondrop-bg.png");
color: rgba(255, 255, 255, 1);
}
.card-container .actions {
position: relative;
margin-top: -35px;
display: none;
color: #FFF;
}
position: relative;
margin-top: -35px;
display: none;
color: #FFF;
} /*here!!!!!!!!!*/
.onEdit .card-container .actions {
display: block;
display: none;
}
.actions button[role="flip"] {
margin: 0;
padding: 0;
border: none;
cursor: pointer;
width: 50px;
height: 50px;
background: url("images/flip.png") left center no-repeat;
text-indent: -99999px;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
width: 50px;
height: 50px;
background: url("images/flip.png") left center no-repeat;
text-indent: -99999px;
}
.card-container {
-webkit-perspective: 600px;
position: relative;
width: 180px;
height: 180px;
/*-webkit-perspective: 600px;*/
position: relative;
width: 180px;
height: 180px;
}
.onEdit .card-container {
height: 200px;
height: 200px;
}
.cards {
position: relative;
width:100%;
height: 100%;
position: relative;
width:100%;
height: 100%;
overflow: hidden;
}
.cards > div {
position: absolute;
float: left;
}
.csstransforms3d .cards > div {
-webkit-transform-style: preserve-3d;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transition: all .5s ease-in-out;
/*-webkit-backface-visibility: hidden;*/
}
.csstransforms3d .cards > div:first-child {
-webkit-transform: rotateY( 0deg );
/*-webkit-transform: rotateY( 0deg );*/
}
.no-csstransforms3d .cards > div:first-child {
display: block;
display: block;
}
.csstransforms3d .cards > div:last-child {
-webkit-transform: rotateY( -180deg );
/* -webkit-transform: rotateY( -180deg );*/
}
.no-csstransforms3d .cards > div:last-child {
display: none;
display: none;
}
.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 {
display: none;
display: none;
}
.csstransforms3d .cards.flip > div:last-child {
-webkit-transform: rotateY( 0deg );
/*-webkit-transform: rotateY( 0deg );*/
}
.no-csstransforms3d .cards.flip > div:last-child {
display: block;
}
\ No newline at end of file
display: block;
}
fr.njin.i18n.document.title = Memory
fr.njin.i18n.toolbar.edit = Display
fr.njin.i18n.toolbar.view = Close
fr.njin.i18n.toolbar.edit = Edit
fr.njin.i18n.toolbar.view = Display
fr.njin.i18n.toolbar.reload = Reload
fr.njin.i18n.toolbar.help = Help
......@@ -16,4 +16,4 @@ fr.njin.i18n.memory.parameters.label.timeout = Timeout
fr.njin.i18n.memory.label.usePicture = Image
fr.njin.i18n.memory.label.drop = Drag and drop here
fr.njin.i18n.memory.action.flip = Flip
\ No newline at end of file
fr.njin.i18n.memory.action.flip = Flip
......@@ -5,7 +5,7 @@ fr.njin.i18n.toolbar.view = Afficher
fr.njin.i18n.toolbar.reload = Recharger
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.pad.themes = tablette
fr.njin.i18n.parameters.label.none.themes = aucun
......@@ -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.drop = Glisser une ressource ici
fr.njin.i18n.memory.action.flip = Tourner
\ No newline at end of file
fr.njin.i18n.memory.action.flip = Tourner
......@@ -12,5 +12,5 @@
<li>éditer directement une carte.</li>
</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>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>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 @@
xmlns:ub="http://uniboard.mnemis.com/widgets"
id="http://www.njin.fr/sankore/apps/tableur"
version="1.0"
width="972"
height="400"
width="1050"
height="560"
ub:resizable="true">
<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