Bonjour, Je suis motivé pour développer un thème responsive fluide multi-colonnes… mais comment l’intégrer à Jeedom, ? Il y aurait des options pour les utilisateurs pour télécharger celui-ci ensuite ?
J’avoue que je ne sais pas trop comment faire… Il y auras des options sur ça plus tard dans la v4 pour les thèmes ?
Voici une capture d’écran d’un thème que je vois pour ma part comme une évolution du thème de base mais en mode fluide. (mais on peux aussi en faire un thème différent biensûr, car je voudrais aussi proposer d’autre versions maintenant)
Dans le code source pour que je puisse faire du bon travail, il manque un sacré paquet de classes css partout dans le code, dont dans le body également des pages (pour définir entre autre la page sur laquelle on se trouve). Des br à enlever aussi dans les widgets… (comme météo) il faudrais des classes spécifique pour chaques widget aussi. Et plus de div aussi autour des boutons des pages entre autre… Y’as pas mal de code html/css à nettoyer en général, mais j’ai essayer de faire au mieux avec les classes que j’avais en tout cas.
Travail en cours…
body {
-webkit-font-smoothing: antialiased;
}
input, textbox, form,select {
box-shadow: none!important;
border-radius: 20px!important;
}
div#div_displayObject {
height: auto!important;
/* width: calc(100% + 12px)!important; */
overflow:hidden!important;
}
main#div_mainContainer {
padding-top: 10px;
}
input#in_searchWidget {
width: 200px!important;
border: 0px;
}
a#bt_displayObject,a#bt_editDashboardWidgetOrder {
border-radius: 20px!important;
box-shadow: inherit!important;
border: 0px;
}
div#div_displayObjectList {
background-color: #f6f6f6;
border: 0px;
}
legend {
border-bottom: none;
padding-bottom: 10px;
}
legend a {
color: #9e9c9c;
}
.eqLogic.eqLogic-widget {
display: table;
border-collapse: collapse;
border-spacing: 0px;
margin-bottom:10px!important;
border: 0px solid transparent!important;
}
.eqLogic.eqLogic-widget span {
font-weight: 100!important;
text-overflow: ellipsis!important;
word-break: break-all;
}
.backgroundforJeedom {
background-image: inherit!important;
}
.eqLogic-widget a {
color: inherit;
font-size: 15px!important;
text-transform: uppercase;
color: #ffffffde;
}
.eqLogic.eqLogic-widget.multimedia {
width: auto!important;
}
.div_object a.btn .fa, .div_object a.btn {
font-size: 16px!important;
font-weight: 100!important;
}
center.widget-name {
display: table-header-group;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.verticalAlign {
height: 100%;
margin: auto;
vertical-align: middle!important;
height: 100%;
min-height: 170px;
height: 170px;
display: table-cell;
text-align: center;
vertical-align: middle;
padding-bottom: 7%;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px!important;
margin: 0px!important;
}
.eqLogic iframe {
height: 140px!important;
width: 100%!important;
}
span.cmd.refresh.pull-right.cursor, i.fa.fa-refresh.pull-right.cursor.refresh {
position: absolute;
right: 10px;
top: 0px;
}
.bs-sidenav {
background-color: #f6f6f6;
}
.eqLogic.eqLogic-widget .verticalAlign .pull-left {
display: none;
}
@media(max-width:480px){
.eqLogic.eqLogic-widget {
width: calc(100% - 10px)!important;
margin-right:10px!important;
height: auto!important;
min-height: 200px;
}
}
@media(max-width:767px){
.eqLogic.eqLogic-widget {
width: calc(50% - 10px)!important;
margin-right:10px!important;
height: auto!important;
min-height: 200px;
}
}
@media(min-width:768px){
.eqLogic.eqLogic-widget {
width: calc(33.3% - 10px)!important;
margin-right:10px!important;
height: auto!important;
min-height: 200px;
}
}
@media(min-width:1200px){
.eqLogic.eqLogic-widget {
width: calc(25% - 10px)!important;
margin-right:10px!important;
height: auto!important;
min-height: 200px;
}
}
.eqLogic.eqLogic-widget:hover {
border: none!important;
}
/*
THEME */
.eqLogic.eqLogic-widget {
border-radius: 10px!important;
}
.verticalAlign {
/* background-color: #ffffff!important; */
border-radius: 10px!important;
/* color: #969696!important; */
}
body {
background:#e6e6e6!important;
}
div#div_pageContainer {
margin-top: 15px;
}
path.highcharts-point {
fill: #fff!important;
}
path.highcharts-pane {
fill: transparent!important;
}
path.highcharts-pane {
stroke-width: 1;
stroke: #FFFFFF;
}
center.widget-name {
display: table-header-group;
height: 30px!important;
overflow: hidden;
background-color: #ffffff40;
border-radius: 20px!important;
}
center.widget-name a{
color: #fff!important;
}
.eqLogic-widget.heliotrope {
min-width: 284px!important;
}
/*
.btn-group-sm>.btn, .btn-sm {
line-height: 1em!important;
}
*/
.cmd.tooltips.cmd-widget {
display: table-cell;
}
body .eqLogic-widget .btn:not(.btn-circle) {
background-color: transparent!important;
color: #fff!important;
border: 1px solid #fff!important;
border-radius: 100px;
margin-top: 10px!important;
padding: 3px;
padding-left: 7px;
padding-right: 7px;
}
.nav-tabs>li>a {
background-color: #ffffff60;
}
.tab-content {
background-color: #fff;
}
div#div_resumePluginList {
background-color: #fff;
}
.ui-widget-overlay {
opacity: .8!important;
background-color: #a7a4a4!important;
background-image:inherit!important;
}
.ui-dialog .ui-dialog-titlebar {
border: 0px!important;
background: #f8f8f8;
}
.ui-dialog {
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #DDD;
}
.market.cursor.notInstall {
border-radius: 15px!important;
}
#md_modal {
background-color: #e7e7e7!important;
}
.eqLogicThumbnailDisplay {
background-color: #fff;
}
.eqLogic {
background-color: #e2e2e2;
}
.objectListContainer, .interactListContainer, .scenarioListContainer {
background-color: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
div.tab-pane {
background-color: #fff;
padding: 20px;
}
table {
background-color: #fff;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
margin-right: 20px;
}
.eqLogic {
background-color: #ffffff;
}
.tab-content {
background-color: #fff;
padding: 20px;
}
input#in_searchScenario {
border: 1px solid #fff;
background: #ffffff;
color: #fff!important;
border-radius: 20px;
box-shadow: none;
margin-bottom: 10px!important;
}
main#div_mainContainer div#div_editScenario input {
border-radius: inherit!important;
}
.cmd-widget {
vertical-align: middle;
}
.eqLogic.eqLogic-widget br {
display: none;
}
EDIT: IMPORTANT :
Pour profiter du style, il faut mettre à 0 les infos :
Pas horizontal : 0
Pas vertical : 0
Marge : 0
Bonjour,
Le choix des couleur est vraiment sympa et ca rend plutot bien le tout arrondit. Après le fluide c’est moins mon truc mais ca me plaire a certaine personne.
Après jeedom est fait pour proposer plusieurs thème on peut donc imaginer en V4 avoir en plus du défaut de maintenant, avoir le light/dark fait avec kiboost et si le tien est compatible l’avoir aussi.
Pour ce qui est des br/class est autre c’est un boulot qu’on va attaquer avec la 3.3 (qui devrait sortir dans 1mois je pense vu que les retours sont bon actuellement).
Je vais déja voir pour te rajouter une class dans le body du type page_nompage, avec nompage qui vaudra le p= de l’url, on aura donc par exemple page_scenario, ou page_dashboard si ca te va je peux le faire dans la journée.
Ah super merci loic… ça serait top comme ça avec ces classes en plus sur les pages.
Mais là ou ça manque cruellement c’est sur la page du dashboard sur les widgets aussi. (car c’est aussi ce qu’on vois en premier) :
Si tu peux rajouter une class perso pour chaque widgets (même un numéro automatiquement attribué, toujours identique entre les jeedoms) (comme le plugin météo par exemple qui est impossible à styliser par css à l’heure actuelle.)
Loic: J’ai oublié de dire que pour tester mon thème il faut à mettre à 0 les infos :
Pas horizontal
Pas vertical
Marge
ça serait pas mal que le thème ai la main sur ça aussi.
Une option qui serait intéressante à avoir dans un panneau de configuration des thèmes un jour… (les options du thèmes par exemple) ça serait de pouvoir gérer des variantes de celui-ci… ça serait ma Request pour la 4.0 ça je pense 
Car une fois que le gros du travail à été fait il serait dommage de se passer de variations colorées de celui-ci (autre tout petit css à sur-charger par exemple) Qui seraient super légers.
Exemple en 6 lignes de css, on peux passer sur du dark avec mon thème principal :
ou
En faite la class c’est pénible car faut la supprimer donc j’ai fait plus simple sur le body j’ai mis un attribut data-page (c’est en beta).
Pour les widgets j’ai pas trop compris tu as déjà un data-eqType en beta qui te dis le plugin du widget ca suffit pas ?
Pour les options du thème je vais y réfléchir a comment faire ça c’est pas simple idem pour avoir des options par défaut car ça c’est simple mais ça va écraser les options de l’utilisateur et la je sais pas comment savoir qui est le premier en gros je dois prendre l’option du thème ou de l’utilisateur.
Je vais regarder pour les data-page… j’utilise des classes plutôt moi en général… ça me change de mes habitudes mais c’est pas grave, je devrais pouvoir le cibler quand même je pense. Je testerai et je te dis. Pareil pour l’eqType.
En gros au niveau de l’ordre de chargement… c’est le thème qui devrait se charger tout à la fin je pense :
• couleur de l’utilsateur
• thème
• variation du thème
L’ennuyeux c’est pour styliser la couleur des boutons des widgets aussi… Globalement je rêve d’un nouveau template pour les widgets par défaut en colonnes… ça serait le rêve pour le design ensuite… soit une col tout centré… soit deux cols… (voir plus, configurable par le créateur du plugin) … tout serait ainsi bien responsive… et propre…
Si jamais aussi Loic regarde ici : https://partenaires.jeedom.com/t/lenteur-du-dashboard-beta-3-3-10/1048/10 J’ai trouvé un bug sur la 3.3.10
Ah je ne l’ai pas sur le plugin météo l’ eqType par exemple.
Il faut la beta du plugin pour le moment.
C’est pas si simple ca veut dire que le theme ecrase les reglages utilisateurs…
La c’est pas possible qu’un theme transforme jeedom pour passer en responsive ok mais jeedom ne peut pas lui passer en responsive ca cassera tout l’affichage sur tout jeedom ou le modifierai c’est clairement quelque chose que les utilisateurs ne veulent pas et ne laisseront pas passer.
Si le thème est bien fait : non (et le thème dois être bien fait pour passer une certain test qualité…
C’est l’unique manière d’avoir facilement du debugage possible et conrtrôle CSS total de le charger à la fin…
Ce qui veux dire que si des dev ne font pas bien leurs css… c’est pas le graphiste / web designer qui pourras les corriger… et ça pourrais rester comme ça… longtemps… > pas top.
Je ne suis pas d’accord… Pour de long formulaires… c’est sûr c’est compliqué… et je n’ai pas encore réfléchit sur ça mais peux de solutions existent forcéement… mais pour le dashboard : aucun problème… regarde :
le contenu d’une tuile est en reponsive avec des colonnes (ce que je voudrais que vous mettiez dans jeedom), ici le contenu n’est absolument pas modifé… Je crois que c’est une mauvaise conception du responsive que vous avez parfois non ?
Si non je veux bien que tu m’expliques ce qui te gêne ici de mettre des colonnes dans les tuiles du dashboard. car le contenu pourrais aussi être automatiquement centré verticalement… (indispensable) et déjà horizontalement.
Et on évite de placer des largeurs en pixels, qui tue absolument tout selon moi…
Je ne vois que des avantages, mais surtout, je le vois comme quelque chose d’élémentaire… (des cols dans le contenu…) aprés qu’on fasse du fluide ou pas… pas de soucis