implement article detail
This commit is contained in:
		
							
								
								
									
										22
									
								
								prototype/src/main/resources/templates/fragments/shop.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										22
									
								
								prototype/src/main/resources/templates/fragments/shop.html
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,22 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
   <meta charset="UTF-8">
 | 
			
		||||
   <title>e-commerce</title>
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
   <nav th:fragment="sidebar">
 | 
			
		||||
      <h1>Kategorien</h1>
 | 
			
		||||
      <ul class="secondary">
 | 
			
		||||
         <li><a>Aufnahmegeräte</a></li>
 | 
			
		||||
         <li><a>Computer</a></li>
 | 
			
		||||
         <li><a>Fernseher</a></li>
 | 
			
		||||
         <li><a>Handys</a></li>
 | 
			
		||||
         <li><a>Unterhaltungselektronik</a></li>
 | 
			
		||||
         <li><a>Sonstiges</a></li>
 | 
			
		||||
      </ul>
 | 
			
		||||
   </nav>
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
@ -10,7 +10,7 @@
 | 
			
		||||
<body>
 | 
			
		||||
   <!-- <nav th:replace="/fragments/header :: header">Header</nav> -->
 | 
			
		||||
    <main class="content-width modal">
 | 
			
		||||
      <form class="detailgrid s hero " th:action="@{/login}">
 | 
			
		||||
      <form class="detailgrid s hero " method="post" th:action="@{/login}">
 | 
			
		||||
         <div class="s">
 | 
			
		||||
            <label for="username">Email Adresse</label>
 | 
			
		||||
            <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
 | 
			
		||||
 | 
			
		||||
@ -0,0 +1,79 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
   <meta charset="utf-8">
 | 
			
		||||
   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
 | 
			
		||||
 | 
			
		||||
   <title>Sucherergebnisse</title>
 | 
			
		||||
   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
   <!-- Dirty hack to align the heading.-->
 | 
			
		||||
   <nav th:replace="/fragments/header :: header">Header</nav>
 | 
			
		||||
   <main class=" content-width">
 | 
			
		||||
      <div class="sidebar-layout" style="min-height: 75vh;">
 | 
			
		||||
         <nav th:replace="/fragments/shop :: sidebar"></nav>
 | 
			
		||||
         <div class="content-width">
 | 
			
		||||
            <div class="detailgrid">
 | 
			
		||||
               <div class="s">
 | 
			
		||||
                  <h1>Tolle Kamera</h1>
 | 
			
		||||
                  <h2>25.14 €</h2>
 | 
			
		||||
                  <p>
 | 
			
		||||
                     Eine TOLLE Kamera <br>
 | 
			
		||||
                     Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
 | 
			
		||||
                     Aber glaub mir, sie is echt echt TOLL! <br>
 | 
			
		||||
                     Indianerehrenwort!
 | 
			
		||||
                  </p>
 | 
			
		||||
               </div>
 | 
			
		||||
               <div class="s">
 | 
			
		||||
                  <img th:src="@{/img/product-1.jpg}" />
 | 
			
		||||
               </div>
 | 
			
		||||
               <div class="s"></div>
 | 
			
		||||
               <form class="s" method="POST">
 | 
			
		||||
                  <h2>50.28 €</h2>
 | 
			
		||||
                  <div>
 | 
			
		||||
                     <label class="nolinebreak">Menge:</label>
 | 
			
		||||
                     <select size="1">
 | 
			
		||||
                        <option>2</option>
 | 
			
		||||
                     </select>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <h3 class="secondarytext">Auf Lager</h3>
 | 
			
		||||
                  <button>In den Einkaufswagen</button>
 | 
			
		||||
               </form>
 | 
			
		||||
            </div>
 | 
			
		||||
         </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="sidebar-layout">
 | 
			
		||||
         <div></div>
 | 
			
		||||
         <div>
 | 
			
		||||
            <h1>Weitere Schnäpchen</h1>
 | 
			
		||||
            <div class='grid m base shadow'>
 | 
			
		||||
               <section> <a th:href="@{/shop/articles/1234}" class="section">
 | 
			
		||||
                     <img th:src="@{/img/product-4.jpg}">
 | 
			
		||||
                     <h2>Kamera Stativ.</h2>
 | 
			
		||||
                     <p class='price'> 25.14 €</p>
 | 
			
		||||
                     <p>
 | 
			
		||||
                        Das Stativ der Zukunft! Jetzt kaufen und verwenden für
 | 
			
		||||
                        wackelfreie Bilder aus der Zukunft!.
 | 
			
		||||
                     </p>
 | 
			
		||||
                  </a>
 | 
			
		||||
               </section>
 | 
			
		||||
 | 
			
		||||
               <section> <a th:href="@{/shop/articles/1234}" class="section">
 | 
			
		||||
                     <img th:src="@{/img/product-5.jpg}">
 | 
			
		||||
                     <h2>Bluetooth Ersatzfernbedinung</h2>
 | 
			
		||||
                     <p class='price'> 10.14 €</p>
 | 
			
		||||
                     <p>
 | 
			
		||||
                        Kann alles und jeden ausknippsen.
 | 
			
		||||
                     </p>
 | 
			
		||||
                  </a>
 | 
			
		||||
               </section>
 | 
			
		||||
            </div>
 | 
			
		||||
         </div>
 | 
			
		||||
   </main>
 | 
			
		||||
   <footer th:replace="/fragments/footer :: footer"></footer>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,7 @@
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
   <meta charset="utf-8">
 | 
			
		||||
   <title>e-commerce</title>
 | 
			
		||||
   <title>Checkout</title>
 | 
			
		||||
   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
 | 
			
		||||
   <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
 | 
			
		||||
   <script th:src="@{/js/filterTable.js}"></script>
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,7 @@
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
   <meta charset="utf-8">
 | 
			
		||||
   <title>e-commerce</title>
 | 
			
		||||
   <title>Checkout erfolgreich!</title>
 | 
			
		||||
   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
 | 
			
		||||
   <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
 | 
			
		||||
   <script th:src="@{/js/scrollToContent.js}"></script>
 | 
			
		||||
 | 
			
		||||
@ -19,17 +19,7 @@
 | 
			
		||||
      </div>
 | 
			
		||||
   </div>
 | 
			
		||||
   <main class="sidebar-layout content-width">
 | 
			
		||||
      <nav>
 | 
			
		||||
         <h1>Kategorien</h1>
 | 
			
		||||
         <ul class="secondary">
 | 
			
		||||
            <li><a>Aufnahmegeräte</a></li>
 | 
			
		||||
            <li><a>Computer</a></li>
 | 
			
		||||
            <li><a>Fernseher</a></li>
 | 
			
		||||
            <li><a>Handys</a></li>
 | 
			
		||||
            <li><a>Unterhaltungselektronik</a></li>
 | 
			
		||||
            <li><a>Sonstiges</a></li>
 | 
			
		||||
         </ul>
 | 
			
		||||
      </nav>
 | 
			
		||||
      <nav  th:replace="/fragments/shop :: sidebar"></nav>
 | 
			
		||||
      <div class="content-width">
 | 
			
		||||
         <div class='grid m condensed'>
 | 
			
		||||
            <section> <a th:href="@{/shop/articles/1234}" class="section">
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user