remove bootstrap : add styles WIP

app/__init__.py

@@ -353,6 +353,9 @@ def create_app(config_class=DevConfig):
     app.jinja_env.autoescape = select_autoescape(default_for_string=True, default=True)
     app.jinja_env.trim_blocks = True
     app.jinja_env.lstrip_blocks = True
+    app.jinja_env.globals["is_hidden_field"] = lambda field: isinstance(
+        field, HiddenField
+    )
 
     # https://scodoc.fr/ScoDoc
     app.register_blueprint(scodoc_bp)

app/static/css/scodoc.css

@@ -480,7 +480,7 @@ div.box-chercheetud {
 }
 
 div.box-chercheetud form input {
-  width: 120px;
+  max-width: 120px;
 }
 
 /* Page accueil général */

app/static/css/scodoc97.css

@@ -323,4 +323,179 @@ body {
 
 #tableau-modules-details:not([open]) #tableau_modules {
     display: none;
-}
+}
+
+/* #region bootstrap <== Remplacement styles bootstrap ==> */
+
+* {
+    box-sizing: border-box;
+}
+
+.alert {
+    text-wrap: balance;
+}
+
+.container {
+    max-width: 1140px;
+    --x: 1.5rem;
+    --y: 0;
+    width: 100%;
+    padding-right: calc(var(--x) * 0.5);
+    padding-left: calc(var(--x) * 0.5);
+    margin-right: auto;
+    margin-left: auto;
+}
+
+/* #region btn */
+
+.btn {
+    appearance: none;
+    background-color: #FAFBFC;
+    border: 1px solid rgba(27, 31, 35, 0.15);
+    border-radius: 6px;
+    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
+    box-sizing: border-box;
+    color: #24292E;
+    cursor: pointer;
+    display: inline-block;
+    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    list-style: none;
+    padding: 6px 16px;
+    position: relative;
+    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    vertical-align: middle;
+    white-space: nowrap;
+    word-wrap: break-word;
+
+    margin: 4px 2px;
+}
+
+a.btn {
+    text-decoration: none;
+}
+
+.btn:hover {
+    background-color: #F3F4F6;
+    text-decoration: none;
+    transition-duration: 0.1s;
+}
+
+.btn:disabled {
+    background-color: #FAFBFC;
+    border-color: rgba(27, 31, 35, 0.15);
+    color: #959DA5;
+    cursor: default;
+}
+
+.btn:active {
+    background-color: #EDEFF2;
+    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
+    transition: none 0s;
+}
+
+.btn:focus {
+    outline: 1px transparent;
+}
+
+.btn:before {
+    display: none;
+}
+
+.btn:-webkit-details-marker {
+    display: none;
+}
+
+/* #endregion btn */
+
+/* #region form */
+
+label,
+input,
+select,
+textarea {
+    margin: 4px 2px;
+}
+
+.control-label {
+    display: inline-block;
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+}
+
+.form-group input,
+.form-control {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 16px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: border-color 0.2s ease-in-out;
+}
+
+.form-group input:focus,
+.form-control:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.form-group input[type="submit"],
+.form-control[type="submit"] {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.form-group input[type="submit"]:hover,
+.form-control[type="submit"]:hover {
+    background-color: #0056b3;
+    color: #fff;
+}
+
+.form-group input[type="submit"][name="cancel"]:hover,
+.form-control[type="submit"][name="cancel"]:hover {
+    background-color: #606060;
+    color: #fff;
+}
+
+.form-group input[type="submit"][name="cancel"],
+.form-control[type="submit"][name="cancel"] {
+    background-color: #8a8a8a;
+    color: #fff;
+}
+
+fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+/* #endregion form */
+/* #region pagination */
+
+.pagination {
+    list-style: none;
+    display: flex;
+}
+
+/* #endregion pagination */
+
+/* #region navbar */
+/* #endregion navbar */
+
+/* #endregion bootstrap ==> */

app/templates/base.j2

@@ -4,6 +4,7 @@
 {% block styles %}
 {{super()}}
 <link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/scodoc.css">
+<link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/scodoc97.css">
 <link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/entreprises.css">
 {% endblock %}
 

app/templates/wtf.j2

@@ -2,8 +2,8 @@
 {% macro form_errors(form, hiddens=True) %}
   {%- if form.errors %}
     {%- for fieldname, errors in form.errors.items() %}
-      {%- if bootstrap_is_hidden_field(form[fieldname]) and hiddens or
+      {%- if is_hidden_field(form[fieldname]) and hiddens or
-             not bootstrap_is_hidden_field(form[fieldname]) and hiddens != 'only' %}
+             not is_hidden_field(form[fieldname]) and hiddens != 'only' %}
         {%- for error in errors %}
           <p class="error">{{error}}</p>
         {%- endfor %}
@@ -75,7 +75,7 @@ the necessary fix for required=False attributes, but will also not set the requi
   <fieldset>
     <legend>{{field.label}}</legend>
     {%- for subfield in field %}
-      {% if not bootstrap_is_hidden_field(subfield) -%}
+      {% if not is_hidden_field(subfield) -%}
         {{ form_field(subfield,
                       form_type=form_type,
                       horizontal_columns=horizontal_columns,
@@ -202,7 +202,7 @@ action="" is what we want, from http://www.ietf.org/rfc/rfc2396.txt:
   {{ form_errors(form, hiddens='only') }}
 
   {%- for field in form %}
-    {% if not bootstrap_is_hidden_field(field) -%}
+    {% if not is_hidden_field(field) -%}
       {{ form_field(field,
                     form_type=form_type,
                     horizontal_columns=horizontal_columns,