홈 탐색 도움말
가입하기 로그인
isundil
/
photochamber-webserver
1
0
포크 0
파일 이슈 7
소스 검색

Login UI

isundil 1 년 전
부모
816cc002aa
커밋
414598e9e0
6개의 변경된 파일과 59개의 추가작업 그리고 4개의 파일을 삭제
분할 보기 변경상태 보기
  1. 23 0
      static/public/css/style.css
  2. 2 2
      templates/_fullPageMedia.js
  3. 1 0
      templates/_header.js
  4. 31 0
      templates/_login.js
  5. 1 1
      templates/_menu.js
  6. 1 1
      templates/index.js

+ 23 - 0
static/public/css/style.css
파일 보기 

@@ -118,3 +118,26 @@
 
     word-break: break-word;
 
 }
 
 
+.login-wrapper {
 
+    position: fixed;
 
+    top: 0;
 
+    bottom: 0;
 
+    left: 0;
 
+    right: 0;
 
+    background: rgba(0, 0, 0, 0.7);
 
+    z-index: 20;
 
+}
 
+
 
+.login-wrapper .modal {
 
+    display: inline-flex;
 
+    flex-direction: column;
 
+    justify-content: center;
 
+    align-items: center;
 
+}
 
+
 
+.login-wrapper hr {
 
+    width: 75%;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+}
 
+

+ 2 - 2
templates/_fullPageMedia.js
파일 보기 

@@ -11,8 +11,8 @@ module.exports = `
 
             <div class="row">
 
                 <div class="col col-12 col-xl-9">
 
                     <div id="pch-fullPagePreviewContainer" class="pch-image loading">
 
-                        <div id="pch-fullPagePreviewSpinner" class="spinner"><span class="spinner-grow"></span></div>
 
-                        <img id="pch-fullPagePreview" src="" class="img-fluid"/>
 
+                        <div id="pch-fullPagePreviewSpinner" class="spinner"><span class="spinner-grow">&nbsp;</span></div>
 
+                        <img id="pch-fullPagePreview" class="img-fluid"/>
 
                     </div>
 
                 </div>
 
                 <div class="col col-12 col-xl-3">

+ 1 - 0
templates/_header.js
파일 보기 

@@ -3,6 +3,7 @@ module.exports = `
 
 <!DOCTYPE html>
 
 <html data-bs-theme="dark">
 
 <head>
 
+<title></title>
 
 <link type="text/css" rel="stylesheet" href="/public/mdi/materialdesignicons.min.css"/>
 
 <link type="text/css" rel="stylesheet" href="/public/bootstrap/bootstrap.min.css"/>
 
 <link type="text/css" rel="stylesheet" href="/public/bootstrap/bootstrap-icons.min.css"/>

+ 31 - 0
templates/_login.js
파일 보기 

@@ -1,3 +1,34 @@
 
 
 module.exports = `
 
+<div class="login-wrapper">
 
+    <div class="modal" tabindex="-1" role="dialog">
 
+        <div class="modal-dialog">
 
+            <div class="modal-content">
 
+                <div class="modal-header">
 
+                    <h5 class="modal-title">Login</h5>
 
+                </div>
 
+                <div class="modal-body">
 
+                    <h6>Using Account</h6>
 
+                    <div class="input-group">
 
+                        <input class="form-control" type="text" placeholder="email  |  pseudo" />
 
+                        <input class="form-control" type="password" placeholder="xxxxxx" />
 
+                        <button type="button" class="btn btn-primary" data-dismiss="modal">Login</button>
 
+                    </div>
 
+                </div>
 
+                <hr/>
 
+                <div class="modal-body">
 
+                    <h6>Using Link</h6>
 
+                    <div class="input-group">
 
+                        <input class="form-control" type="text" placeholder="Invite Code" />
 
+                        <button type="button" class="btn btn-primary" data-dismiss="modal">Checkout</button>
 
+                    </div>
 
+                </div>
 
+                <div class="modal-footer"
 
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
 `;
 
+

+ 1 - 1
templates/_menu.js
파일 보기 

@@ -11,7 +11,7 @@ module.exports = `
 
                 </form>
 
                 <li class="nav-item dropdown">
 
                     <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-                        <i class="bi bi-person-circle"></i>
 
+                        <i class="bi bi-person-circle">&nbsp;</i>
 
                     </a>
 
                     <ul class="dropdown-menu" id="accessListMenu">
 
                         <li id="menu-login"><a class="dropdown-item" href="#">Login</a></li>

+ 1 - 1
templates/index.js
파일 보기 

@@ -9,7 +9,7 @@ module.exports = require('./_header.js') +require('./_menu.js')
 
     +require('./_fullPageMedia.js')
 
     +`
 
 </div>`
 
-    +require('./_login.js')
 
     +`</div></div>`
 
+    +require('./_login.js')
 
     +require('./_footer.js');