I am a little desesparated whenever I see very long HTML code in Razor pages.
So I showed my co workers antoher way to write code in Razor Pages, it is like JSX in Razor :-)
@{
void Style(string color)
{
<style>
.ba-bg-lghtgrey {
background: #F0F0F0;
}
.ba-hide {
display: none;
}
.ba-barre {
background: @color !important;
color: black;
height:50px;
}
.ba-barre-left {
margin-left: 0.5rem;
margin-right: 0.5rem;
color: white;
}
.ba-barre-right {
margin-left: 0.5rem;
margin-right: 0.5rem;
color: white;
}
.ba-barre-center {
text-align: center;
width:75%;
}
.ba-grow-input-group {
flex-grow: 1;
-webkit-transition: all .3s -.1s ease-in-out;
transition: all .3s -.1s ease-in-out;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.ba-brand {
font-size: 1.5rem;
color: white;
}
.ba-btn-clear {
height: 38px;
border-top: 1px solid rgb(206, 212,218) !important;
border-bottom: 1px solid rgb(206, 212,218) !important;
border-radius: 0;
background: white;
}
.ba-btn-search {
border-top: 1px solid rgb(206, 212,218) !important;
border-bottom: 1px solid rgb(206, 212,218) !important;
height: 38px;
}
.ba-form-control {
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
}
input::-ms-clear {
display: none
}
</style>
}
void ClearIcon()
{
<svg height="18" width="18" viewBox="0 2 16 16" fill="black">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
}
void SearchIcon()
{
<svg width="18" height="18" viewBox="2 3 20 20">
<path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
</svg>
}
void Logo()
{
<div>
<span class="d-none d-lg-block ">
<svg height='45px' width='45px' fill='#ff0000' version='1.1' viewBox='-2 -2 35 35'
x='0px' y='0px' xmlSpace='preserve'>
<g>
<path d='M20.682,3.732C20.209,3.26,19.582,3,18.914,3s-1.295,0.26-1.77,0.733l-1.41,1.412 C15.261,5.617,15,6.245,15,6.914c0,0.471,0.129,0.922,0.371,1.313L1.794,13.666c-0.908,0.399-1.559,1.218-1.742,2.189 c-0.185,0.977,0.125,1.979,0.834,2.687l12.72,12.58c0.548,0.548,1.276,0.859,2.045,0.877C15.669,32,15.711,32,15.729,32 c0.202,0,0.407-0.021,0.61-0.062c0.994-0.206,1.808-0.893,2.177-1.828l5.342-13.376c0.402,0.265,0.875,0.407,1.367,0.407 c0.67,0,1.297-0.261,1.768-0.733L28.4,15c0.477-0.474,0.738-1.103,0.738-1.773s-0.262-1.3-0.732-1.768L20.682,3.732z M16.659,29.367c-0.124,0.313-0.397,0.544-0.727,0.612c-0.076,0.016-0.153,0.022-0.229,0.021c-0.254-0.006-0.499-0.108-0.682-0.292 L2.293,17.12c-0.234-0.233-0.337-0.567-0.275-0.893c0.061-0.324,0.279-0.598,0.582-0.73l6.217-2.49 c4.189,1.393,8.379,0.051,12.57,4.522L16.659,29.367z M26.992,13.58l-1.414,1.413c-0.195,0.196-0.512,0.196-0.707,0l-1.768-1.767 l-1.432,3.589l0.119-0.303c-3.01-3.005-6.069-3.384-8.829-3.723c-0.887-0.109-1.747-0.223-2.592-0.405l8.491-3.401l-1.715-1.715 c-0.195-0.195-0.195-0.512,0-0.707l1.414-1.415c0.195-0.195,0.512-0.195,0.707,0l7.725,7.727 C27.189,13.068,27.189,13.385,26.992,13.58z'
fill='#ffffff' />
<path d='M16.5,21c1.378,0,2.5-1.121,2.5-2.5S17.879,16,16.5,16c-1.379,0-2.5,1.121-2.5,2.5S15.122,21,16.5,21z M16.5,17c0.828,0,1.5,0.672,1.5,1.5S17.328,20,16.5,20c-0.829,0-1.5-0.672-1.5-1.5S15.671,17,16.5,17z'
fill='#ffffff' />
<path d='M29.5,0C28.121,0,27,1.121,27,2.5S28.121,5,29.5,5S32,3.879,32,2.5S30.879,0,29.5,0z M29.5,4 C28.672,4,28,3.328,28,2.5S28.672,1,29.5,1S31,1.672,31,2.5S30.328,4,29.5,4z'
fill='#ffffff' />
<path d='M8,17c0,1.103,0.897,2,2,2s2-0.897,2-2s-0.897-2-2-2S8,15.897,8,17z M10,16c0.552,0,1,0.447,1,1 s-0.448,1-1,1s-1-0.447-1-1S9.448,16,10,16z'
fill='#ffffff' />
<circle cx='13' cy='23' fill='#ffffff' r='1' />
<circle cx='29' cy='8' fill='#ffffff' r='1' />
</g>
</svg>
</span>
</div>
}
void SearchComp()
{
<div class="input-group">
<label for="search" style="width:0; height:0">Search</label>
<input type="search" placeholder="What're you searching for?" class="form-control ba-form-control">
<div class="input-group-append">
<button id="button-search" type="submit" class="ba-btn-clear btn btn-light" aria-label="search button">
@{ ClearIcon();}
</button>
</div>
<div class="input-group-append">
<button id="button-search" type="submit" class="btn btn-light ba-btn-search ba-bg-lghtgrey" aria-label="search button">
@{ SearchIcon();}
</button>
</div>
</div>
}
void LeftPart()
{
<div class="ba-barre-left d-flex align-items-center">
<div>Hamb</div>
<div class="ml-2 mr-2">@{Logo();}</div>
<div class="ba-brand">Anomalie</div>
</div>
}
void CenterPart()
{
SearchComp();
}
void RighPart()
{
<div class="ba-barre-right d-flex justify-content-around">
<div>Filtres (2)</div>
<div>Effacer</div>
<div>Applis</div>
<div>Av</div>
<div>Profile</div>
<div></div>
</div>
}
async Task BarreAppli()
{
<nav>
<div class="ba-barre d-flex justify-content-between align-items-center box-shadow">
<div class="ba-barre-left">@{LeftPart();}</div>
<div class="ba-barre-center">@{CenterPart();}</div>
<div class="ba-barre-right">@{RighPart();}</div>
</div>
</nav>
}
}
// Entry Point
@{
Style("#005E8A");
await BarreAppli();
}
<script>
// Elements
const searchGroup = document.querySelector("input[type='search']");
const barreLeft = document.getElementsByClassName("ba-barre-left")[0];
const barreRight = document.getElementsByClassName("ba-barre-right")[0];
const ancestorSearchGroup = searchGroup.parentElement.parentElement;
/*-------------------------- Events ------------------------*/
// Hide side parts
function hideSideParts(hide) {
if (hide) {
barreLeft.classList.add("ba-hide");
barreRight.classList.add("ba-hide");
}
else {
barreLeft.classList.remove("ba-hide");
barreRight.classList.remove("ba-hide");
}
}
// Expand Input on focus
searchGroup.addEventListener("focus", function (e) {
e.preventDefault();
hideSideParts(true);
ancestorSearchGroup.classList.add("ba-grow-input-group");
})
// Restore Input
document.addEventListener("click", function (e) {
e.target != searchGroup && hideSideParts(false);
})
</script>
Top comments (0)