Sartog - De retour (un peu) et un nouveau design en cours

[Xav-74]

Merci pour toutes ces explications ! J’ai toujours eu du mal avec les css mais j’apprends bcp grâce à toi

Xav

[sartog]

Je trouve la couleur choisit pas trop agressive justement, mais je reconnais qu’en dark c’est pas mal aussi

Il y a pas mal d’exemple sur le web en tapant dark neumorphism pour te faire rêver

Mon code doit être facilement adaptable (suffit de trouver les bonne couleurs d’ombre).

Je viens de tomber sur ce site https://neumorphism.io/

[alexcrp]

@sartog

https://neumorphism.io/

Miam ! Merci

Intéressant aussi: https://www.justinmind.com/blog/neumorphism-ui/

Prochain challenge (!):

[sartog]

Je te rassure, j’ai aussi parfois du mal avec le css (tout ce qui touche au box, position relative / aboslute, etc. je n’accroche pas ).

Je tâtonne pas mal, et je cherche des exemples / idées sur internet (j’aime bien codepen.io, les gars font des trucs en css de malade !).

[Xav-74]

Hello @sartog,

J’avance pas mal sur mon design. Je te montrerai ca prochainement
J’ai juste un souci d’affichage sur mon iPad (idem iPhone). Constates-tu également ce souci ?

Version PC (Chrome en dernière version) :

Version iPad (Chrome en dernière version) :

Merci d’avance
Xav

[alexcrp]

Et en « poussant » jeudi vers la gauche dans le css ?

@Xav-74 et @sartog, si vous aviez quelques minutes à m’accorder, j’ai ouvert un fil pour essayer de m’y retrouver avant de me lancer comme vous.

Avec quelques questions fondamentales avant de me lancer, merci pour votre aide:

Design Jeedom v4 - Quelles bonnes pratiques svp ? ;)

Bonjour à tou(te)s, j’essaye en ce moment de fabriquer mon propre design (grand sujet), assez motivé pour faire une version Neumorphic Dark, en mettant les mains dans le dur si besoin puisque j’ai des notions de html et de css. Avant cela, j’aimerai connaitre les bonnes pratiques, car j’ai beau fouiller, je tombe sur pas mal d’infos parmi lesquelles j’ai du mal à voir clair. Parce qu’elles sont parfois obsolètes (doc officielle widget), ou à cause de certains abus de langage dans les tutos (lé…

[Xav-74]

Hello @alexcrp
Mon problème est que c’est OK sur mon PC, pas sur ma tablette avec les mêmes css

J’ai vu ton post et j’allais te répondre. Je serai en congés à partir de mercredi donc j’aurais du temps pour échanger avec toi si ca te va.

Xav

[alexcrp]

@Xav-74

J’ai vu ton post et j’allais te répondre. Je serai en congés à partir de mercredi donc j’aurais du temps pour échanger avec toi si ca te va.

Merci bcp ! Pas d’urgence, quand tu peux, parfois j’ai tendance à bcp écrire pour m’y retrouver, avec quelques lignes de réponse ca me ferait deja avancer

J’ai pas bien saisi dans quel fichier vous injectiez les modifs de css par exemple, etc.

[sartog]

Salut Xav,

En effet, j’avais constaté le problème.
Quand je travaille sur mon thème sur PC (Chrome) j’ai bien le même affichage que sur ma tablette (Androïd), mais quand je travaille sur mon Mac j’ai le même décalage que toi.

N’affichant mon design que sur la tablette, je n’ai pas cherché plus loin le problème.
Mais par curiosité j’essayerais de voir entre PC et Mac la différence qui pourrait générer ce décalage.

P.S.: J’adore l’image de fond que tu as utilisé !!

[sartog]

Salut Alex,

J’essais de regarder ça rapidement

[Xav-74]

Ok ça me rassure !
Je vais chercher aussi

Pour l’image de fond, et habitant sur Annecy j’ai cherché lac et montagne
Si tu la veux, n’hésites pas !

Xav

[sartog]

Je viens de regarder, sans trouver la raison du problème (peut être l’interprétation du grid par les navigateurs pas encore parfaite).

Il y a peut être une alternative en modifiant un peu mon css de la sorte (j’ai essayé via la console de développement sous Safari et sur PC avec Chrome et ça fonctionne) :

.mia-meteo-cadre-prevision-grid {
    width: 290px;
    height: 170px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0px;
}

.mia-meteo-cadre-prevision-grid div {
    width: 80px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border-radius: 25px;
    box-shadow: 5px 5px 10px 0px rgba(136, 165, 191, 0.5), -5px -5px 10px 0px rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 2;
}

• Dans le 1er bloc, il faut supprimer le margin-left: 12px
• Dans le 2nd bloc, il faut ajouter margin-left: auto et margin-right: auto

Je vais faire la modification de mon côté, mais je te laisse revenir vers moi si ça ne fonctionne pas.

[Xav-74]

C’est ok pour moi aussi avec les modifs
Merci

Xav

[alexcrp]

@sartog

Edit : Une alternative plus facile à mettre en œuvre consiste au stockage de vos fichiers sources dans un dossier que vous créez dans desktop (par exemple un dossier montheme).
Ainsi vous éviter l’effacement de vos fichiers sources aux mise à jour ET vous n’avez pas besoin de modifier le .htaccess.

Merci pour l’astuce

[Didier3L]

@sartog Tout en blanc … comme à l’hosto

[sartog]

Mais ce n’est pas blanc (dixit internet) :

Le code hexadécimal de la couleur #e7eef7 est une très légère teinte de couleur cyan-bleu

[alexcrp]

Chez les artistes on dit que c’est un blanc froid il y a des blancs chauds aussi, comme les gris et leurs 50 nuances, mais c’est une autre histoire !

[alexcrp]

@sartog

Concernant l’horloge :

@sartog, grâce à ton travail et tes explications, je peux proposer une variante pour l’horloge si certain(e)s sont intéressé(e)s Je me suis basé sur cette reférence.

J’ai ajouté l’aiguille des secondes, et créé un bord fin périphérique, ce qui donne:

Il manque juste un point central de la même couleur que l’aiguille des secondes à ajouter si on veut être puriste. Et je crois qu’il est aussi possible d’ajouter un petit effet de « bounce » sur l’aiguille des secondes pour les jusqueboutistes (en CSS ou JS…)

Le JS:

var deg = 6;
var hr = document.querySelector("#hr");
var mn = document.querySelector("#mn");
var sc = document.querySelector("#sc");


setInterval(() =>{
    let day = new Date();
    let hh = day.getHours() * 30;
    let mm = day.getMinutes() * deg;
 	let ss = day.getSeconds() * deg;

    hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    sc.style.transform = `rotateZ(${ss}deg)`;
  	
})

Le CSS:

.clock{
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/clock.png);
    background-size: cover;
    border-radius: 50%;
    box-shadow: 2px 2px 5px 2px rgba(136, 165, 191, 0.5), -2px -2px 5px 2px rgba(255,255,255, 0.8);
}

.clock::before{
    content: "";
    position: absolute;
    height: 98px;
    width: 98px;
    background-color: none;
    border-radius: 50%;
    box-shadow: inset 2px 2px 5px 2px rgba(136, 165, 191, 0.5), inset -2px -2px 5px 2px rgba(255, 255, 255, 0.7);
}

.clock .hour,
.clock .min,
.clock .sec{
    position: absolute;
}



.clock .hour, .hr {
    width: 60px;
    height: 60px;
}

.clock .min, .mn{
    width: 80px;
    height: 80px;
}

.clock .sec, .sc{
    width: 80px;
    height: 80px;
}


.hr, .mn, .sc {
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 50%;
}

.hr::before{
    content: "";
    position: absolute;
    width: 3px;
    height: 30px;
    background-color: #f81668;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}

.mn::before{
    content: "";
    position: absolute;
    width: 2px;
    height: 40px;
    background-color: #2cdde7;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}

.sc::before{
    content: "";
    position: absolute;
    width: 2px;
    height: 52px;
    background-color: #a0e66c;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}

Le html du bloc:

<link rel="stylesheet" href="/desktop/tab/css/clock.css">

<div class="clock">
  <div class="hour">
    <div class="hr" id="hr"></div>
  </div>
  <div class="min">
    <div class="mn" id="mn"></div>
  </div>
  <div class="sec">
    <div class="sc" id="sc"></div>
  </div>
</div>

<script src="/desktop/tab/js/clock.js"></script>

[EDIT] Un lien codepen pour voir l’horloge en fonctionnement (manque juste l’image de fond…)

[mydlina]

Hello,

Je continue doucement mon design et je suis un peu perdu sur la partie méteo
Je trouve pas les

• wu-icons-style.css : pour les icônes des prévision
• weather.png : c’est l’image représentant les arbres et montagne habillant la partie haute du widget.

Ou puis les trouver stp?
sur les liens que tu as mis j’ai pas trouver

[alexcrp]

Pour les icones @mydlina, sartog disait plus haut:

@sartog

Les fichiers d’icones proviennent de :

• http://erikflowers.github.io/weather-icons/
• https://peter.build/weather-underground-icons/

En alternative, tu peux aussi utiliser font-awesome

et pour l’image de fond, il tu peux la fabriquer toi-même, cf. ce qu’a fait @Xav-74

@Xav-74

Pour l’image de fond, et habitant sur Annecy j’ai cherché lac et montagne

Il peut mesurer largeur 300 px par hauteur 250 px et la ranger en la renommant weather.png dans le répertoire

../img/weather.png

expliqué par @sartog ici:

@sartog

.mia-meteo-cadre-now {
    width: 300px;
    height: 250px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 150px 150px;
    grid-template-rows: 130px 40px;
    border-radius: 25px 25px 0 0;
    background: url(../img/weather.png) no-repeat bottom/100%;
}