레이아웃 수정( footer / 메인 정비 ) #48 (#49)

* 상단바 단순하게 바꿈 화면이 작아질 경우 UI버튼 식으로 변경 * Navbar 마이페이지 기능 추가(#12) * passwd 레이아웃 정리 (#13) * 상단바 잘리는 버그 픽스 * Readme에 실행 방법 추가(#18) * group list 드롭다운 메뉴로 관리 (#41) * 상단 바 active 기능 추가(눌렀을 때 남아있게) * 임시 메인페이지(#10) * 메인 페이지 다듬기 * nav bar link 수정 * script 밑에서 선언 * footer 추가 * 게시물보기 디자인 수정
CNU-ANT · Apr 30, 2018 · 0f5bc97 · 0f5bc97
1 parent d528d16
commit 0f5bc97
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 24 deletions.
diff --git a/static/asset_main/ANT_thinking.jpg b/static/asset_main/ANT_thinking.jpg
diff --git a/static/asset_main/SDS.jpg b/static/asset_main/SDS.jpg
diff --git a/static/asset_main/ant17.png b/static/asset_main/ant17.png
diff --git a/static/asset_main/codershigh.jpg b/static/asset_main/codershigh.jpg
diff --git a/static/asset_main/thinking_poster.png b/static/asset_main/thinking_poster.png
diff --git a/templates/base.html b/templates/base.html
@@ -9,8 +9,6 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -25,10 +23,7 @@
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
+
 </head>
 <body>
     {% include 'header.html' %}
@@ -39,4 +34,11 @@
     {% include 'footer.html' %}
 
 </body>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+ <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
 </html>
diff --git a/templates/board/detail.html b/templates/board/detail.html
@@ -8,16 +8,25 @@ <h3>
             <small> {{ b_name_e }}</small>
         </h3>
     </div>
-    <div>
-        <div class="col-md-6 col-md-offset-3">
-            <h4>{{ content.title }}
-                <small>{{ content.writer }}</small>
-                <small> {{ content.}}</small>
-            </h4>
-            <div class = "">
-                <p>{{ content.text }}</p>
-            </div>
-            {# TODO : 여기 구성좀 해주세요. #}
+    <div class="col-md-8 col-md-offset-1 ">
+        <h3>{{ content.title }}
+
+        </h3>
+        <h4>
+            <small>작성자 : {{ content.writer }}</small>
+            <small class="pull-right "> {{ content.create_date}}</small>
+        </h4>
+        <hr>
+        <div class="">
+            <p style="height:300px">{{ content.text }}</p>
+
+        </div>
+        <div class="form-group text-center">
+            <div class="err-msg">{{ response }}</div>
+            <button type="submit" class="btn btn-info">작성완료<i class="fa fa-check spaceLeft"></i></button>
+            <a href="{{ namespace }}">
+                <button type="button" class="btn btn-warning">취소<i class="fa fa-times spaceLeft"></i></button>
+            </a>
         </div>
     </div>
 </article>

diff --git a/templates/footer.html b/templates/footer.html
@@ -0,0 +1,61 @@
+<style>
+/* Add a dark background color to the footer */
+footer {
+    background-color: #2d2d30;
+    color: #f5f5f5;
+    padding: 16px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+footer a {
+    color: #f5f5f5;
+}
+
+footer a:hover {
+    color: #777;
+    text-decoration: none;
+}
+</style>
+<div style="height:100px"> </div>
+<footer class="text-center">
+  <a class="up-arrow" href="#" data-toggle="tooltip" title="TO TOP">
+    <span class="glyphicon glyphicon-chevron-up"></span>
+  </a><br>
+    <span class="pull-right text-muted small"><a href="https://github.com/CNU-ANT/ANT-Cave">Ant-Cave</a> ©2018</span>
+<br>
+</footer>
+
+<script>
+$(document).ready(function(){
+    // Initialize Tooltip
+    $('[data-toggle="tooltip"]').tooltip();
+})
+/* 부드럽게 스크롤 작용 */
+$(document).ready(function(){
+  // Add smooth scrolling to all links in navbar + footer link
+  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
+
+  // Make sure this.hash has a value before overriding default behavior
+  if (this.hash !== "") {
+
+    // Prevent default anchor click behavior
+    event.preventDefault();
+
+    // Store hash
+    var hash = this.hash;
+
+    // Using jQuery's animate() method to add smooth page scroll
+    // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
+    $('html, body').animate({
+      scrollTop: $(hash).offset().top
+    }, 900, function(){
+
+      // Add hash (#) to URL when done scrolling (default click behavior)
+      window.location.hash = hash;
+      });
+    } // End if
+  });
+})
+</script>
+
diff --git a/templates/group_list.html b/templates/group_list.html
@@ -6,7 +6,7 @@
         <div class="navbar-header">
             <div class="navbar-brand">
                 {% if user.is_authenticated %}
-                <a href="#" style="text-decoration:none">Welcome </a>
+                <a href="/" style="text-decoration:none">Welcome </a>
                 <span class="dropdown-toggle" data-toggle="dropdown" href="#">
                 {{ user.get_username }} <span class="caret"></span>
                 </span>

diff --git a/templates/main.html b/templates/main.html
@@ -1,11 +1,32 @@
 {% extends 'base.html' %}
 
 {% block content %}
-
 <div class="container">
     <h3> ANT 홈페이지입니다. </h3>
   <br>
-  <div id="myCarousel" class="carousel slide" data-ride="carousel">
+
+<div class="container">
+    <h3 data-toggle="modal" data-target="#myModal"> ANT 홈페이지입니다. </h3>
+     <!-- Modal -->
+  <div class="modal fade" id="myModal" role="dialog">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">현재 개발 중입니다.</h4>
+        </div>
+        <div class="modal-body">
+          <a href="https://github.com/CNU-ANT/ANT-Cave">ANT-Cave</a>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <br>
+    <div style="width=50%">
+  <div id="myCarousel" class="carousel slide "  data-ride="carousel">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
@@ -15,33 +36,33 @@ <h3> ANT 홈페이지입니다. </h3>
     </ol>
       {% load staticfiles %}
     <!-- Wrapper for slides -->
-    <div class="carousel-inner" role="listbox">
+    <div class="carousel-inner" role="listbox" >
       <div class="item active">
-        <img src="{% static 'ant17.png' %}" alt="Chania" width="100%">
+        <img src="{% static 'asset_main/ant17.png' %}" class="img-responsive img-rounded" alt="Chania" width="100%">
         <div class="carousel-caption">
           <h3>ANT 란?</h3>
           <p>알고리즘 공부하는 동아리입니다.</p>
         </div>
       </div>
 
       <div class="item">
-        <img src="{% static 'codershigh.jpg' %}" alt="Flower" width="100%" >
+        <img src="{% static 'asset_main/codershigh.jpg' %}" class="img-responsive img-rounded" alt="Flower" width="100%" >
         <div class="carousel-caption">
           <h3>대회</h3>
           <p>도 나가요.</p>
         </div>
       </div>
 
       <div class="item">
-        <img src="{% static 'ANT_thinking.jpg' %}" alt="Poster" height="100%">
+        <img src="{% static 'asset_main/ANT_thinking.jpg' %}" class="img-responsive img-rounded" alt="Poster" height="100%">
         <div class="carousel-caption">
           <h3>대회도 열어요</h3>
           <p>진짜로 believe it!</p>
         </div>
       </div>
 
       <div class="item">
-        <img src="{% static 'SDS.jpg' %}" alt="description" height="100%">
+        <img src="{% static 'asset_main/SDS.jpg' %}" class="img-responsive img-rounded" alt="description" height="100%">
         <div class="carousel-caption">
           <h3>취업 설명회 개최</h3>
           <p>취업하려면 알고리즘 하세요.</p>
@@ -50,6 +71,19 @@ <h3>취업 설명회 개최</h3>
 
     </div>
 
+    <!-- Left and right controls -->
+    <a class="left carousel-control" style="background:none" href="#myCarousel" role="button" data-slide="prev">
+      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" style="background:none" href="#myCarousel" role="button" data-slide="next">
+      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
+</div>
+    </div>
+
     <!-- Left and right controls -->
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>