Comments (5)
CSS
/home/geonatureadmin/geonature/custom/css/frontend.css
app {
background-color: white;
}
#logo-structure {
height: 50px;
width: 130px;
}
#login-body
{
background-size: cover !important;
}
.appnav{
max-height: 70vh !important;
}
/**********************/
/* Optimisation Mobile */
/* @media only screen and (orientation: portrait) and (max-width: 600px) { */
@media only screen and (orientation: landscape) and (max-width: 800px) {
/* Suppression des éléments facultatifs */
#appName {
display: none;
}
.navbar-footer{
display: none;
}
}
@media only screen and (max-device-width: 600px) {
/* Suppression des éléments facultatifs */
#appName {
display: none;
}
.navbar-footer{
display: none;
}
#login-body
{
background-position-x: 70% !important;
}
/* Agrandissement de la navbar */
#app-toolbar{
height: 20%
}
/**********************/
/* Occtax */
.float-btns {
position: relative;
display: contents;
}
.float-btns .btn-action {
width: 100%;
margin-bottom: 10px;
margin-left: 0px !important;;
}
#btn-finish{
position: relative !important;
right: 0px !important;
bottom: 0px !important;
margin-left: 25%;
margin-right: 25%;
margin-top: 15px;
}
#taxon-tab{
height: auto !important;
}
#left-form{
height: auto !important;
}
.occtax-form .bloc-button {
position: sticky !important;
}
#add-occ{
position: sticky !important;
}
.mat-expansion-panel-body .col-3 {
max-width: 100% !important;
}
.mat-expansion-panel-body .col-3 input {
width: 50px;
}
.occtax-form-content{
height: auto !important;
}
.datatable-footer-inner{
display: block !important;
height: auto !important;
}
#taxon-tab mat-accordion .blc-expansion-panel input[type="text"], .ui-select-focusser {
display: none;
}
/**********************/
/* metadata */
/* pas mal de sm 12 a mettre sur les groupe */
/* Synthese */
.search-btn button{
width: 100%;
}
/* non fonctionnel */
#sidebar{
width:50% !important;;
}
/* Commun */
#download-btn{
width: 100%;
}
/* Monitoring */
.app-content .flex-container{
display: block !important;
}
.app-content #monitoring-map-container{
width: 90%;
margin-right: 5%;
margin-left: 5%;
}
.app-content #monitoring-elem-container{
width: 100%;
}
html body pnx-root pnx-nav-home.ng-star-inserted mat-sidenav-container.mat-drawer-container.mat-sidenav-container.sidenav-container mat-sidenav-content.mat-drawer-content.mat-sidenav-content div.app-content div pnx-occtax-form.ng-star-inserted div.container-fluid div.occtax-form div.occtax-form-content.ng-star-inserted div.row div.col-xl-6.col-lg-5.col-sm-12{
overflow-y: visible !important;
height: auto !important;
}
html body pnx-root pnx-nav-home.ng-star-inserted mat-sidenav-container.mat-drawer-container.mat-sidenav-container.sidenav-container mat-sidenav-content.mat-drawer-content.mat-sidenav-content div.app-content div pnx-occtax-form.ng-star-inserted div.container-fluid div.occtax-form div.tab div.tab-left a.tablinks.active
{
width: 100%;
}
html body pnx-root pnx-nav-home.ng-star-inserted mat-sidenav-container.mat-drawer-container.mat-sidenav-container.sidenav-container mat-sidenav-content.mat-drawer-content.mat-sidenav-content div.app-content div pnx-occtax-form.ng-star-inserted div.container-fluid div.occtax-form div#taxon-tab.occtax-form-content.ng-star-inserted div.row div#left-form.col-md-6
{
}
html body pnx-root pnx-nav-home.ng-star-inserted mat-sidenav-container.mat-drawer-container.mat-sidenav-container.sidenav-container mat-sidenav-content.mat-drawer-content.mat-sidenav-content div.app-content div pnx-occtax-form.ng-star-inserted div.container-fluid div.occtax-form div#taxon-tab.occtax-form-content.ng-star-inserted div.row div#left-form.col-md-6 pnx-occtax-form-occurrence.ng-tns-c289-3.ng-star-inserted div.row.ng-tns-c289-3
{
height: auto !important;
}
}
from geonature.
exemple concret pour le module occtax
Avant
Après
from geonature.
OK intéressant.
N'hésite pas à faire une PR pour que tout le monde bénéficie de ces améliorations.
from geonature.
Bonjour @camillemonchicourt et @TheoLechemia
Avancées
J'ai poursuivi le travail et je commence a avoir un rendu intéressant pour plusieurs modules :
Header
Occtax
Synthese
Monitoring
Donc je voudrais vous faire tester et valider la logique avant de continuer.
Car dans un premier temps, je suis parti sur un fichier css de custom avec des règles mobiles qui s'adaptent a l'existant.
afin de proposer un "fix" car certains boutons/champs qui se superposent gênent ou bloquent la saisie.
Mais ce n'est pas perrin donc dans un second temps,
je voudrais savoir si je peux continuer de cette manière
ou si je dois aller modifier et glisser du css dans chaque component ?
Exemple
Wrapper de la synthese
J'ai passé le display a Block pour les media de moins de 700px
PR soon
Ce n'est pas encore assez mature pour une PR,
mais vous pouvez trouver le travail dans une branche "feat-responsive"
qui est sur mon repo et a jour avec la dev.
https://github.com/pierre56/GeoNature/blob/feat-responsive/custom/css/frontend.css
J'ai fait une partie de mes tests sur la demo de geonature donc vous avez juste a coller le css pour que mon travail soit visible 😄
Bonne journée
Pierre
from geonature.
OK intéressant.
Oui ces évolutions sont pertinentes.
Il faut veiller cependant à se baser au maximum sur les grilles et le responsive de Bootstrap, et ajouter le moins de classe ou media-query spécifiques, qui rendraient la maintenance et les mises à jour de Bootstrap plus complexes.
from geonature.
Related Issues (20)
- Permissions : filtre taxonomique HOT 4
- Permissions : formulaire de demande de permissions HOT 5
- Pagination et order_by
- OCCTAX dupliqué - retour au module de base
- [Règles de notifications] Modification du statut d'une observation
- Bandeau de cookie modules Geonature HOT 1
- Connexion à différents fournisseurs d'identités HOT 3
- Installation incomplète de la v2.14.0 HOT 3
- [IMPORT] Contrôle de données pour la destination occhab
- [OCCTAX dupliqué] absence de filtrage des données sur le sous module Occtax HOT 4
- [SYNTHESE - Custum views] label avec apostrophe non fonctionnel HOT 2
- Fonctions traduisant les id nomenclatures / utilisateurs HOT 1
- FESP_FRONTEND_4 - Ajout d'un picto illustrant le groupe taxonomique HOT 9
- FESP_FRONTEND_1 - Passage sur le frontend de la fiche espèce HOT 14
- A_DISC_1 - [HOME][DISCUSSIONS] Ajout d'une section "Dernières discussion" HOT 7
- [OCCTAX] - dénombrement qui switch d'occurrence
- Tooltip des ng-select qui ne disparaissent pas HOT 2
- modifier l'ordre des actions de migration
- [OCCTAX] - Recherche par observateur dans la liste d'accueil HOT 1
- Associations nomenclatures / groupes INPN non prises en compte dans les champs additionnels HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from geonature.