finish modal style and, adjustmodal template

backstage/blogs/forms.py

@@ -10,7 +10,7 @@ selected_choices = [('expertise_in_interior_decorating', '裝修專業'),
 
 
 class BlogCreateForm(FlaskForm):
-    title = StringField('Tilte', validators=[DataRequired()])
-    image = FileField('Image', validators=[
+    title = StringField('標題', validators=[DataRequired()])
+    image = FileField('圖片', validators=[
         FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
-    categories = SelectField('Categories', choices=selected_choices)
+    categories = SelectField('主題類別', choices=selected_choices)

backstage/collections/forms.py

@@ -5,7 +5,7 @@ from wtforms.validators import DataRequired
 
 
 class CollectionCreateForm(FlaskForm):
-    title = StringField('Tilte', validators=[DataRequired()])
-    image = FileField('Image', validators=[
+    title = StringField('標題', validators=[DataRequired()])
+    image = FileField('圖片', validators=[
         FileRequired(), FileAllowed(['jpg', 'png', 'gif', 'webp'], 'Images only!')])
-    description = TextAreaField('Description', validators=[DataRequired()])
+    description = TextAreaField('內容描述', validators=[DataRequired()])

backstage/static/styles/main.css

@@ -134,7 +134,22 @@
   position: relative;
   transition: all 0.3s;
 }
+/*btn in modals*/
+.btn__submitadd {
+  background-color: rgb(179, 179, 179);
+  color: white;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  transition: all 0.3s;
+}
+
+.btn__submitadd:hover {
+  background-color: grey;
+}
 
+.btn__cancel {
+  background-color: white;
+}
 .btn__add i {
   transition: all 0.3s;
 }
@@ -395,5 +410,52 @@ a.bg-dark, a.bg-dark:visited {
 a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
   background-color: rgb(179, 179, 179) !important;
 }
+/* --- Modal */ 
 
+.modal__label {
+  font-size: 1.1rem;
+  color: grey;
+  letter-spacing: 1px;
+}
 
+.modal__title {
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.form-control:focus {
+  border-color: rgb(179, 179, 179);
+  box-shadow: 1px 1px 4px 2px rgb(216, 215, 215);
+}
+
+.modal__close:focus {
+  outline: none;
+}
+
+.modal__close__back {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-color: gray;
+  border-radius: 50%;
+}
+
+.modal__close__back span {
+  line-height: 1.7rem;
+  color: white;
+}
+
+.modal__file::-webkit-file-upload-button {
+  border: none;
+  padding: .2em .4em;
+  border-radius: .2em;
+  background-color: rgb(216, 215, 215);
+  transition: 1s;
+}
+.modal__file::file-selector-button {
+  border: none;
+  padding: .2em .4em;
+  border-radius: .2em;
+  background-color: rgb(216, 215, 215);
+  transition: 1s;
+}

backstage/templates/blogs.html

@@ -22,16 +22,16 @@
 {% block modal_body %}
   <form action="{{ url_for('blogs.create') }}" method="POST" enctype="multipart/form-data">
     <div class="form-group">
-      {{ form.title.label(class="form-control-label") }}
+      {{ form.title.label(class="form-control-label modal__label mb-1") }}
       {{ form.title(class="form-control form-control-lg") }}
-      {{ form.image.label(class="form-control-label") }}
-      {{ form.image(class="form-control form-control-lg") }}
-      {{ form.categories.label(class="form-control-label") }}
+      {{ form.image.label(class="form-control-label modal__label mt-3 mb-1") }}
+      {{ form.image(class="form-control form-control-lg modal__file") }}
+      {{ form.categories.label(class="form-control-label modal__label mt-3 mb-1") }}
       {{ form.categories(class="form-control form-control-lg") }}
     </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-      <input class="btn btn-primary" type="submit" value="Create">
+    <div class="modal-footer pb-0 border-0">
+      <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+      <input class="btn btn__submitadd" type="submit" value="完成">
     </div>
   </form>
 {% endblock modal_body %}

backstage/templates/collections.html

@@ -19,28 +19,22 @@
     </tbody>
 {% endfor %}
 {% endblock table_body %}
-</table>
+
 <!-- Modal -->
-<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="createModalLabel">新增文章</h5>
-      </div>
-      <form action="{{ url_for('collections.create') }}" method="POST" enctype="multipart/form-data">
-        <div class="form-group">
-          {{ form.title.label(class="form-control-label") }}
-          {{ form.title(class="form-control form-control-lg") }}
-          {{ form.image.label(class="form-control-label") }}
-          {{ form.image(class="form-control form-control-lg") }}
-          {{ form.description.label(class="form-control-label") }}
-          {{ form.description(class="form-control form-control-lg") }}
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          <input class="btn btn-primary" type="submit" value="Create">
-        </div>
-      </form>
+{% block modal_body %}
+  <form action="{{ url_for('collections.create') }}" method="POST" enctype="multipart/form-data">
+    <div class="form-group">
+      {{ form.title.label(class="form-control-label modal__label mb-1") }}
+      {{ form.title(class="form-control form-control-lg") }}
+      {{ form.image.label(class="form-control-label modal__label mt-3 mb-1") }}
+      {{ form.image(class="form-control form-control-lg modal__file") }}
+      {{ form.description.label(class="form-control-label modal__label mt-3 mb-1") }}
+      {{ form.description(class="form-control form-control-lg textarea") }}
     </div>
-  </div>
-</div>
+    <div class="modal-footer  pb-0 border-0">
+      <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+      <input class="btn btn__submitadd" type="submit" value="完成">
+    </div>
+  </form>
+{% endblock modal_body %}
+      

backstage/templates/tables/editor_table.html

@@ -19,10 +19,17 @@
   <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="createModalLabel">新增文章</h5>
+        <div class="modal-header border-0">
+          <h5 class="modal-title modal__title" id="createModalLabel">新增文章</h5>
+          <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+            <span class="modal__close__back">
+              <span aria-hidden="true">&times;</span>
+            </span>
+          </button>
+        </div>
+        <div class="modal-body">
+          {% block modal_body %}{% endblock %}
         </div>
-        {% block modal_body %}{% endblock %}
       </div>
     </div>
   </div>