feat: Add first simple modal design with no functionality

gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css

@@ -127,7 +127,7 @@ ol {
     margin-right: 5px;
     cursor: pointer;
 }
-.annotation-footer-date {
+.flex-one {
     flex: 1
 }
 .container-fluid-content {
@@ -135,7 +135,7 @@ ol {
     flex-flow: column;
     height: 100%;
 }
-.content-header {
+.flex {
     display: flex;
 }
 .full-height {
@@ -148,4 +148,7 @@ ol {
 .leftcontent-text {
     overflow: scroll;
 }
+.resize-vertical {
+    resize: vertical;
+}
 

gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js

@@ -48,6 +48,8 @@ $(document).ready(function() {
                 });
             }
 
+            $('#annotation-create-modal').modal('show');
+
         },
         items: {
             "annotation": {name: "Annotation", icon: "edit"}
@@ -266,7 +268,7 @@ function displayAnnotation(annotation) {
                             )
                             .append(
                                 // timestamp
-                                $('<div>').attr('class', 'annotation-footer-date overflow-hidden')
+                                $('<div>').attr('class', 'flex-one overflow-hidden')
                                     .append(
                                         $('<i>').attr('class', dateIcon)
                                     )

gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp

@@ -43,7 +43,7 @@
         <div class="page-content-wrapper full-height">
             <div class="container-fluid full-height">
                 <div class="container-fluid-content">
-                    <div class="content-header">
+                    <div class="flex">
                         <h1>gemeinsam Forschen
                             <a href="#">
                     <span class="glyphicon glyphicon-envelope"
@@ -78,7 +78,41 @@
                 </div>
             </div>
         </div>
+        <!-- annotation create modal -->
+        <div id="annotation-create-modal" class="modal fade" role="dialog">
+            <div class="modal-dialog modal-dialog-centered modal-sm">
+                <div class="modal-content">
+
+                    <!-- modal header -->
+                    <div class="modal-header flex">
+                        <h4 class="modal-title flex-one">Annotation</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- modal body -->
+                    <div class="modal-body">
+                        <form>
+                            <div class="form-group">
+                                <label for="annotation-form-title" class="col-form-label">Titel:</label>
+                                <input type="text" class="form-control" id="annotation-form-title">
+                            </div>
+                            <div class="form-group">
+                                <label for="annotation-form-comment" class="col-form-label">Kommentar:</label>
+                                <textarea class="form-control resize-vertical" id="annotation-form-comment"></textarea>
+                            </div>
+                        </form>
+                    </div>
+
+                    <!-- modal footer -->
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
+                        <button type="button" class="btn btn-primary">Speichern</button>
+                    </div>
+
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>