Skip to content

Commit

Permalink
button ok
Browse files Browse the repository at this point in the history
  • Loading branch information
Gemma committed Nov 8, 2023
1 parent 52060b0 commit 50215b3
Show file tree
Hide file tree
Showing 5 changed files with 202 additions and 94 deletions.
70 changes: 70 additions & 0 deletions permissions/permissions-ui/media/mystyle.css
Original file line number Diff line number Diff line change
Expand Up @@ -484,3 +484,73 @@ table {
/* padding-left: 7px; */
padding: 4px;
}



.Btn {
display: flex;
align-items: center;
justify-content: flex-start;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
transition-duration: .3s;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
background-color: rgb(167, 19, 19);
margin-left: 60px;
}

/* plus sign */
.sign {
width: 100%;
transition-duration: .3s;
display: flex;
align-items: center;
justify-content: center;
}

.sign svg {
width: 17px;
}

.sign svg path {
fill: white;
}
/* text */
.text {
position: absolute;
right: 0%;
width: 0%;
opacity: 0;
color: white;
font-size: 1.2em;
font-weight: 600;
transition-duration: .3s;
}
/* hover effect on button width */
.Btn:hover {
width: 125px;
border-radius: 40px;
transition-duration: .3s;
}

.Btn:hover .sign {
width: 30%;
transition-duration: .3s;
padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
opacity: 1;
width: 70%;
transition-duration: .3s;
padding-right: 10px;
}
/* button click effect*/
.Btn:active {
transform: translate(2px ,2px);
}
197 changes: 103 additions & 94 deletions permissions/permissions-ui/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,124 +2,133 @@

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="media/mystyle.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="https://unpkg.com/@popperjs/core@2" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="media/tablesorter.js"></script>
<script src="media/arrows.js"></script>
</head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="media/mystyle.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="https://unpkg.com/@popperjs/core@2" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="media/tablesorter.js"></script>
<script src="media/arrows.js"></script>
</head>

<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<span class="navbar-text ">
<img class="logo" src="media/logo.png" alt="EGA" height="70px">
</span>
<a class="navbar-brand " href="/"><h1 class="bi bi-kanban display-6 mx-auto p-2 fw-bold ms-5" style="color: #760509;"> Beacon Admin Page</h1></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<span class="navbar-text ">
<img class="logo" src="media/logo.png" alt="EGA" height="70px">
</span>
<a class="navbar-brand " href="/">
<h1 class="bi bi-kanban display-6 mx-auto p-2 fw-bold ms-5" style="color: #760509;"> Beacon Admin Page</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">

</div>
</div>
</div>
</div>

</nav>

<div class="container pt-3 " style="font-size: 14px; ">
<div class="col">
<div class="containerfirst">
<div class="row">
</nav>

<div class="col-3" style="display: inline">


<div class="row">
<div class="col">
<form method="post" onsubmit="openLoader()">
{% csrf_token %}
<div class="row"><div>
{% for f in form %}
<p>{{f.help_text|safe}} {{f}} </p>
{% endfor %}
</div>
</div>
<div class="row">
<div class="col-5">
<button type="submit" class="btn btn-danger mb-3">Search</button>
<div class="container pt-3 " style="font-size: 14px; ">
<div class="col">
<div class="containerfirst">
<div class="row">

<div class="col-3" style="display: inline">


<div class="row">
<div class="col">
<form method="post" onsubmit="openLoader()">
{% csrf_token %}
<div class="row">
<div>
{% for f in form %}
<p>{{f.help_text|safe}} {{f}} </p>
{% endfor %}
</div>
</div>
<div class="row">
<div class="col-5">
<button type="submit" class="btn btn-danger mb-3">Search</button>
</div>
</div>
</form>
</div>
</form>
</div>

</div>
<div>
<div>
</div>


</div>




</div>


















</div>
</div>
</div>


</div>
</div>
</div>


</div>
</div>
</div>
{% include "footer.html" %}
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<script>
function myFunction2() {
var x = document.getElementById("example");
if (x.style.display === "inline-flex") {
x.style.display = "none";
} else {
x.style.display = "inline-flex";
}
}
</script>
<script>

function openLoader() {
</div>


</div>
</div>
</div>


</div>
</div>
</div>
{% include "footer.html" %}
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<script>
function myFunction2() {
var x = document.getElementById("example");
if (x.style.display === "inline-flex") {
x.style.display = "none";
} else {
x.style.display = "inline-flex";
}
}
</script>
<script>

function openLoader() {
document.getElementById("missatge").style.display = "block";
}

</script>
<script src="media/app.js"></script>
</body>
</html>

</html>
9 changes: 9 additions & 0 deletions permissions/permissions-ui/templates/controlled.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,16 @@ <h1 class="bi bi-kanban display-6 mx-auto p-2 fw-bold ms-5" style="color: #76050
</div>

</nav>
<button class="Btn">

<div class="sign"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
</svg></div>

<div class="text">Back</div>
</button>
<div class="container pt-3 " style="font-size: 14px; ">
<div class="col">
<div class="containerfirst">
Expand Down
10 changes: 10 additions & 0 deletions permissions/permissions-ui/templates/public.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,16 @@ <h1 class="bi bi-kanban display-6 mx-auto p-2 fw-bold ms-5" style="color: #76050
</div>

</nav>
<button class="Btn">

<div class="sign"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
</svg></div>

<div class="text">Back</div>
</button>

<div class="container pt-3 " style="font-size: 14px; ">
<div class="col">
Expand Down
10 changes: 10 additions & 0 deletions permissions/permissions-ui/templates/registered.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,16 @@ <h1 class="bi bi-kanban display-6 mx-auto p-2 fw-bold ms-5" style="color: #76050
</div>

</nav>
<button class="Btn">

<div class="sign"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
</svg></div>

<div class="text">Back</div>
</button>

<div class="container pt-3 " style="font-size: 14px; ">
<div class="col">
Expand Down

0 comments on commit 50215b3

Please sign in to comment.