Skip to content

Commit

Permalink
IS #43 Logo-Search에 맞게 기존 Front-End 개선 (#45)
Browse files Browse the repository at this point in the history 
* Update Image-Search Front End mobile ver.

* Update Image-Search To Logo-Search

* Update Modal Size in Mobile screen size

* Change Photo Size In Detail Result Page

* Change Image Size
  • Loading branch information
@SangWoo9734
SangWoo9734 committed Sep 6, 2020
1 parent c20b578 commit 5ad67f2
Show file tree
Hide file tree
Showing 7 changed files with 281 additions and 63 deletions.
144 changes: 132 additions & 12 deletions app/image_search/static/image_search/css/theme_image_search.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/image_search/static/image_search/js/action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ $(document).ready(function(){
}else if($(img).width() > $(img).height()){
$(img).addClass("thumbnail-width");
}else {
$(img).addClass("thumbnail-width");
$(img).addClass("thumbnail-height");
}
})

Expand Down
24 changes: 6 additions & 18 deletions app/image_search/templates/image_search/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,36 +25,24 @@
<body>
<header class="header fixed-top">
<div class="branding docs-branding">
<div class="container-fluid position-relative py-2">
<div class="container-fluid position-relative py-2 ">
<div class="docs-logo-wrapper">
<div class="site-logo"><a class="navbar-brand" href="{% url 'main_page' %}"><span class="logo-text">⚡Thunder<span class="text-alt"> - Patent Search</span></span></a></div>
<div class="site-logo"><a class="navbar-brand" href="{% url 'main_page' %}"><span class="logo-text">⚡Thunder</span></a></div>
</div><!--//docs-logo-wrapper-->
</div><!--//container-->
<div class="header-email">
<div class = "linked-bar"><a class = "mode-change" href="#">Patent - Search</a><a class = "mode-change" href="#">Logo -Search</a></div>
</div><!--//docs-top-utilities-->
</div><!--//branding-->
</header><!--//header-->

<div class="page-header theme-bg-dark text-center position-relative">
<!-- <div class="theme-bg-shapes-right"></div>
<div class="theme-bg-shapes-left"></div> -->
<div class="container search-part">
<h1 class="page-heading single-col-max mx-auto"><span class="text-search" style="display:none">Text-Search</span><span class="image-search">Image-Search</span></h1>
<div class="page-intro single-col-max mx-auto">Everything you need to get your software documentation online.</div>
<h1 class="page-heading single-col-max mx-auto"><span class="image-search">Logo - Search</span></h1>
<div class="main-search-box pt-3 d-block mx-auto">
<div class="main-menu">
<div class="radio-btn">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Text
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" checked> Image
</label>
</div>
<div class="text-search" style="display:none" class="hero__search">
<form class="search-form w-100">
<input type="text" placeholder="Search the docs..." name="search" class="form-control search-input">
<button type="submit" class="btn search-btn" value="Search"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="image-search">
<div id="image_container">
<p id="image_container_text"><img src="{% static 'image_search/img/upload.png' %}" alt="upload"><br><br>Drag and Drop your file here...</p>
Expand Down
96 changes: 76 additions & 20 deletions app/image_search/templates/image_search/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,20 @@
<div class="row justify-content-center">
<div class="col-lg-3 col-md-4 col-sm-6 py-3">
<div class="card shadow-sm">
<div class="card-body">
<div class="card-body btn btn-modal btn-lg" data-toggle="modal" data-target="#myModal">
<div class="product-thumbnail">
<img src="{% static 'image_search/img/car.jpg' %}" alt="product-1" class="thumbnail-img">
</div>
<div class="featured__item__text">
<h6><a href="#">Crab Pool Security</a></h6>
<h6>Crab Pool Security</h6>
<div class="card-text">
Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<p>Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<div class="meta-wrap">
<p class="meta viewer">
<span><i class="icon-calendar mr-2"></i>August 25, 2020</span>
<span><i class="icon-comment2 mr-2"></i>5 Views</span>
</p>
</div>
</div>
</div>
</div><!--//card-body-->
Expand All @@ -23,64 +29,114 @@ <h6><a href="#">Crab Pool Security</a></h6>

<div class="col-lg-3 col-md-4 col-sm-6 py-3">
<div class="card shadow-sm">
<div class="card-body">
<div class="card-body btn btn-modal btn-lg" data-toggle="modal" data-target="#myModal"">
<div class="product-thumbnail">
<img src="{% static 'image_search/img/product-1.jpg' %}" alt="product-1" class="thumbnail-img">
</div>
<div class="featured__item__text">
<h6><a href="#">Crab Pool Security</a></h6>
<h6>Crab Pool Security</h6>
<div class="card-text">
Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<p>Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<div class="meta-wrap">
<p class="meta viewer">
<span><i class="icon-calendar mr-2"></i>August 25, 2020</span>
<span><i class="icon-comment2 mr-2"></i>5 Views</span>
</p>
</div>
</div>
</div>
</div><!--//card-body-->
</div><!--//card-->
</div><!--//col-->

<div class="col-lg-3 col-md-4 col-sm-6 py-3">
<div class="card shadow-sm">
<div class="card-body">
<div class="card-body btn btn-modal btn-lg" data-toggle="modal" data-target="#myModal"">
<div class="product-thumbnail">
<img src="{% static 'image_search/img/b.jpg' %}" alt="product-1" class="thumbnail-img">
</div>
<div class="featured__item__text">
<h6><a href="#">Crab Pool Security</a></h6>
<h6>Crab Pool Security</h6>
<div class="card-text">
Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<p>Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<div class="meta-wrap">
<p class="meta viewer">
<span><i class="icon-calendar mr-2"></i>August 25, 2020</span>
<span><i class="icon-comment2 mr-2"></i>5 Views</span>
</p>
</div>
</div>
</div>
</div><!--//card-body-->
</div><!--//card-->
</div><!--//col-->

<div class="col-lg-3 col-md-4 col-sm-6 py-3">
<div class="card shadow-sm">
<div class="card-body">
<div class="card-body btn btn-modal btn-lg" data-toggle="modal" data-target="#myModal"">
<div class="product-thumbnail">
<img src="{% static 'image_search/img/product-2.jpg' %}" alt="product-1" class="thumbnail-img">
</div>
<div class="featured__item__text">
<h6><a href="#">Crab Pool Security</a></h6>
<h6>Crab Pool Security</h6>
<div class="card-text">
Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<p>Section overview goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<div class="meta-wrap">
<p class="meta viewer">
<span><i class="icon-calendar mr-2"></i>August 25, 2020</span>
<span><i class="icon-comment2 mr-2"></i>5 Views</span>
</p>
</div>
</div>
</div>
</div><!--//card-body-->
</div><!--//card-->
</div><!--//col-->

</div><!--//row-->
<div class="row">
<div class="col">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"><</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">></a></li>
<li class="page-item page-pre"><a class="page-link" href="#"><</a></li>
<li class="page-item page-num active"><a class="page-link" href="#">1</a></li>
<li class="page-item page-num "><a class="page-link" href="#">2</a></li>
<li class="page-item page-num "><a class="page-link" href="#">3</a></li>
<li class="page-item page-num "><a class="page-link" href="#">4</a></li>
<li class="page-item page-num "><a class="page-link" href="#">5</a></li>
<li class="page-item page-next"><a class="page-link" href="#">></a></li>
</ul>
</div>
</div>

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body container-fluid">
<div class="row">
<div class="col-lg-7 col-xs-12 modal_content">
<p class='content-title'>Detail</p>
<div class="detail-image">
<img src="{% static 'image_search/img/car.jpg' %}" alt="product-1" class="thumbnail-img">
</div>
</div>
<div class="col-lg-5 col-xs-12 modal_info">
<div class="info_row"><p class="content-title">Logo ID</p><p>apdsifjdpfj</p></div>
<div class="info_row"><p class="content-title">Country</p><p>apdsifjdpfj</p></div>
<div class="info_row"><p class="content-title">Kind(Category)</p><p>apdsifjdpfj</p></div>
<div class="info_row"><p class="content-title">assignee</p><p>apdsifjdpfj</p></div>
<div class="info_row"><p class="content-title">inventor</p><p>apdsifjdpfj</p></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-modal">More...</button>
</div>
</div>
</div>
</div>
</div><!--//container-->
</div><!--//container-->
</div><!--//page-content-->
Expand Down
54 changes: 45 additions & 9 deletions app/text_search/static/text_search/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4819,8 +4819,7 @@ a.close.disabled {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem; }
.modal-header .close {
padding: 1rem 1rem;
margin: -1rem -1rem -1rem auto; }
position: absolute;right:1%;top: 50%;transform: translate(-50%, -50%);}

.modal-title {
margin-bottom: 0;
Expand Down Expand Up @@ -9483,11 +9482,6 @@ body {
overflow-x: hidden;
padding-right:0 !important;
}
@media (max-width : 499px){
.modal-content {
width : 95% !important;
}
}

.btn-modal{
color: #28b76b;
Expand Down Expand Up @@ -9537,7 +9531,49 @@ body {
.info_row {
margin-top : 10px
}
.product-thumbnail{
position : relative;
width: 100%;
height : 220px;
margin-bottom : 10px;
}

.thumbnail-height{
position : absolute;
height : 100%;
width: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.thumbnail-width{
position : absolute;
height : auto;
width : 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-height : 100%;
}

.class {
margin : 0
.detail-image {
position : relative;
width: 100%;
height : 90%;
margin-bottom : 10px;
}
@media (max-width : 499px){
.modal-content {
width : 95% !important;
height : 90%;
}
.detail-image {
position : relative;
width: 100%;
height : 220px;
margin-bottom : 10px;
}
}
.close:focus{
outline : none;
}
11 changes: 11 additions & 0 deletions app/text_search/static/text_search/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,14 @@

})(jQuery);

$(document).ready(function(){
$(".thumbnail-img").each(function (index, img){
if($(img).width() < $(img).height()){
$(img).addClass("thumbnail-height");
}else if($(img).width() > $(img).height()){
$(img).addClass("thumbnail-width");
}else {
$(img).addClass("thumbnail-height");
}
})
});
13 changes: 10 additions & 3 deletions app/text_search/templates/text_search/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h1 class="page-heading single-col-max mx-auto"><span class="text-search" >Text-
<div class="main-search-box pt-3 d-block mx-auto">
<form class="search-form w-100">
<input type="text" placeholder="Search the docs..." name="search" class="form-control search-input">
<button type="submit" class="btn search-btn" value="Search"><i class="fa fa-search"></i></button>
<!-- <button type="submit" class="btn search-btn" value="Search"><i class="fa fa-search"></i></button> -->
</form>
</div>
</div>
Expand Down Expand Up @@ -110,8 +110,10 @@ <h4 class="modal-title" id="myModalLabel">title</h4>
<div class="modal-body container-fluid">
<div class="row">
<div class="col-lg-7 col-xs-12 modal_content">
<p class='content-title'>Abstract</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At provident nihil nemo ducimus consequatur totam repudiandae officiis dignissimos magni voluptatibus temporibus dolorum voluptatum illum, exercitationem non? Magni aspernatur iusto id est accusantium consequuntur, accusamus perspiciatis maiores atque quibusdam inventore, quasi reprehenderit sapiente eveniet assumenda corporis deleniti quae aliquid quaerat rem dolore quam fugit. Voluptas minus libero at. Fugit, tenetur sint beatae dignissimos provident quasi est quos porro odio. Quod quos magni sint eos exercitationem, saepe quia placeat distinctio repudiandae reiciendis sequi sunt, veritatis enim, temporibus deleniti aliquid quaerat unde at facere iusto itaque fugiat. Modi magnam placeat nam optio assumenda.</p>
<p class='content-title'>Detail</p>
<div class="detail-image">
<img src="{% static 'text_search/images/image_7.jpg' %}" alt="product-1" class="thumbnail-img">
</div>
</div>
<div class="col-lg-5 col-xs-12 modal_info">
<div class="info_row"><p class="content-title">Patent ID</p><p>apdsifjdpfj</p></div>
Expand All @@ -122,6 +124,11 @@ <h4 class="modal-title" id="myModalLabel">title</h4>
<div class="info_row"><p class="content-title">inventor</p><p>apdsifjdpfj</p></div>
</div>
</div>
<div class="row">
<div class="col-12 modal_content modal-content-ect"><p class='content-title'>Abstract</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At provident nihil nemo ducimus consequatur totam repudiandae officiis dignissimos magni voluptatibus temporibus dolorum voluptatum illum, exercitationem non? Magni aspernatur iusto id est accusantium consequuntur, accusamus perspiciatis maiores atque quibusdam inventore, quasi reprehenderit sapiente eveniet assumenda corporis deleniti quae aliquid quaerat rem dolore quam fugit. Voluptas minus libero at. Fugit, tenetur sint beatae dignissimos provident quasi est quos porro odio. Quod quos magni sint eos exercitationem, saepe quia placeat distinctio repudiandae reiciendis sequi sunt, veritatis enim, temporibus deleniti aliquid quaerat unde at facere iusto itaque fugiat. Modi magnam placeat nam optio assumenda.</p>
</div>
</div>
<div class="row">
<div class="col-12 modal_content modal-content-ect">
<p class='content-title'>ect</p>
Expand Down

0 comments on commit 5ad67f2

Please sign in to comment.