I use Mudblzor and make like to document page style.
<DocsPage DisplayFooter="true">
<DocsPageHeader Title="Explore MudBlazor" SubTitle="Discover articles from MudBlazor team.">
<SpecialHeaderContent>
<MudText Typo="Typo.h2" Inline="true" Class="docs-title">Explore </MudText>
<MudText Typo="Typo.h2" Inline="true" Color="Color.Primary" Class="docs-title">MudBlazor</MudText>
<MudText Typo="Typo.subtitle1" Class="docs-title-description">Discover our library and all components to power your next project.</MudText>
</SpecialHeaderContent>
</DocsPageHeader>
<DocsPageContent>
<DocsPageSection>
<MudGrid>
<MudItem xs="12" md="3" Class="mt-16">
<div class="docs-sticky-info explore-text">
<MudText Typo="Typo.h5">Foundation</MudText>
<MudText Typo="Typo.subtitle1">Themeing, Colors, Typography…</MudText>
</div>
</MudItem>
<MudItem xs="12" md="9" Class="mt-16">
<div class="explore-mudblazor-items">
<DocsExploreCard Title="Colors" Link="/features/colors">
<MudPaper Height="24px" Width="24px" Class="relative mb-n6 ml-n8">
<MudPaper Elevation="25" Height="68px" Width="24px" Class="mud-theme-dark absolute" Style="bottom:0;left: 0; transform: rotate(0deg);transform-origin: bottom center;"/>
<MudPaper Elevation="25" Height="68px" Width="24px" Class="mud-theme-tertiary absolute" Style="bottom:0;left: 0; transform: rotate(30deg);transform-origin: bottom center;"/>
<MudPaper Elevation="25" Height="68px" Width="24px" Class="mud-theme-secondary absolute" Style="bottom:0;left: 0; transform: rotate(60deg);transform-origin: bottom center;"/>
<MudPaper Elevation="25" Height="68px" Width="24px" Class="mud-theme-primary d-flex justify-center align-end absolute" Style="bottom:0;left: 0; transform: rotate(90deg);transform-origin: bottom center;">
<MudPaper Elevation="0" Height="8px" Width="8px" Class="rounded-circle ma-2"/>
</MudPaper>
</MudPaper>
</DocsExploreCard>
<DocsExploreCard Title="Typography" Link="/components/typography">
<MudIcon Icon="#Icons.Filled.TextFields" Color="Color.Primary" Style="font-size:64px;"/>
</DocsExploreCard>
</DocsPageSection>
</DocsPage>
like https://mudblazor.com/docs/overview this page
copy cs and razor file but I can't make the same style
Who knows to make that overview page layout?
please share your know-how
Related
I am trying to use the puppeteer-sharp page.ClickAsync() method to click an element in a combo box. I need to get
this below (Canadian Dollar).
</li><li class="favorite"><div class="display">Canadian Dollar</div><div class="value">CAD</div>
<div class="container want">your text
<div class="label"><strong>Currency I want:</strong></div>
<div class="currency-container">
<div class="want-select collapse"> <div class="overlay"> <div class="colorBlock active" data-color="#0000e0" style="border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2px solid transparent; color: rgb(0, 0, 224);">EUR</div> <div class="amount" align="right"></div> </div> <div class="select-container"> <div class="currencyPicker" data-index=""> <input class="search" placeholder="Type to search..."> <ul class="list" style="display: none;"><li class="groupLabel favorite"><div class="display">Favorites</div><div class="value"></div></li><li class="favorite"><div class="display">Euro</div><div class="value">EUR</div></li><li class="favorite"><div class="display">US Dollar</div><div class="value">USD</div></li><li class="favorite"><div class="display">British Pound</div><div class="value">GBP</div></li><li class="favorite"><div class="display">Canadian Dollar</div><div class="value">CAD</div></li><li class="favorite"><div class="display">Australian Dollar</div><div class="value">AUD</div></li><li class="groupLabel"><div class="display">A</div><div class="value"></div></li><li><div class="display">Afghanistan Afghani</div><div class="value">AFN</div></li><li><div class="display">Afghanistan Old Afghani*</div><div class="value">AFA</div></li><li><div class="display">Albanian Lek</div><div class="value">ALL</div></li><li><div class="display">Algerian Dinar</div><div class="value">DZD</div></li><li><div class="display">Andorran Franc*</div><div class="value">ADF</div></li><li><div
I have tried many different ways, but nothing is working.
await page1.ClickAsync(".body,.controls,.secondary,.container want,.currency-container,.want-select collapse,.select-container,.currencyPicker,.list,.favorite,.dispaly,.value, CAD");
await page1.ClickAsync(".want-select,.select-container");
await page1.ClickAsync("div[class='display']:has-text('Canadian Dollar')");
I have tried.
await page1.ClickAsync(".want-select,.select-container");
await page1.ClickAsync(".body,.controls,.secondary,.container want,.currency-container,.want-select collapse,.select-container,.currencyPicker,.list,.favorite,.dispaly,.value, CAD");
await page1.ClickAsync("div[class='display']");
await page1.ClickAsync("div[class='display']:has-text('Canadian Dollar')");
This worked
var elements = await page1.XPathAsync("//html/body/div/div/div/div/div/div/div/div/div/ul/li[5]/div[2]");
await elements[0].ClickAsync();
and this too.
await page1.ClickAsync("#hcc>div.body>div.controls>div.secondary>div.container.want>div.currency-container>div.want-select.collapse.active>div.select-container>div>ul>li:nth-child(5)>div.value")
page-break is not working in firefox
im using vue, vuetify
<div :class="groupLen() ? 'group' : 'min-group'" class="page-break">
<div v-for="(group, i) in components.groups" :key="`${i}a`">
<v-card style="border: thin solid #a80707;" class="pt-0 pa-3 grey lighten-2" rounded outlined>
<v-card-title class="pl-0">{{ group.name }}</v-card-title>
<div :class="$vuetify.breakpoint.name" class="pa-0">
<div v-for="(item, i) in group.items" :key="i">
<dynamic
:componentName="item.Widget"
:properties="item.properties"
/>
</div>
</div>
</v-card>
</div>
</div>
div.page-break div {
// -webkit-column-break-inside: avoid;
// page-break-inside: avoid;
break-inside: avoid;
padding-bottom: 0.5em;
}
screenshot from firefox
screenshot from brave
here I want to add a label on the popular blogger popular posts widget, but it doesn't appear there and that's the code. Is there something wrong?
Here I have done the right thing like adding labels and so on, in normal posts it works fine, but popular post widgets don't work using this code
Code:
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/> </a>
<b:if cond='data:label.isLast != "true"'> </b:if>
</b:loop>
Try my custom Popular Post. Its has label on it.
.grid-col {grid-template-columns: repeat(3,1fr);display: grid;}
.grid-col .post:nth-child(n+2) {margin: 10px;}
.grid-col section:nth-child(1) img {height: 205px;object-fit: cover;object-position: top;}
.grid-col img {width: 100%}
.grid-col section:nth-child(1) {grid-column: 1 / -1;}
.grid-col section:nth-child(n+2) img, .ofc {height: 105px;object-fit: cover;}
.grid-col section:nth-child(n+2) .post-title,.grid-col section:nth-child(n+2) .byline, .grid-col section:nth-child(n+2) .date {display: none;}
.ov-img, .ov-title {grid-row: 1 / -1;}
.ov-img {grid-column: 1 / -1;}
.ov-title {grid-column: 1 / -1;align-self: self-end;padding: 10px 15px;overflow: hidden;}
.grid-col section:nth-child(1) .ov-title {background: linear-gradient(to bottom,#0000,#000);}
.item-thumbnail {position: relative;display: grid;}
.item-thumbnail:hover img {filter: brightness(50%);transition: .2s}
.PopularPosts{counter-reset: section;}
.grid-col section .counter::before {counter-increment: section;content: counter(section);position: absolute;top: 6px;left: 4px;background: #FF6347;color: white;padding: 3px 7px;font-size: 13px;border-radius: 3px;}
.PopularPosts .post-title {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.PopularPosts a,.genre-date{color: white;text-decoration: none;font-weight: 500}
.genre-date {font-size: 14px;}
.widget-title {display: flex;justify-content: space-between;align-items: center}
.view-all {background: #FF6347;text-transform: uppercase;font-size: 9px;padding: 3px 6px;border-radius: 2px;}
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='widget-title'>
<b:include name='widget-title'/>
<a class='view-all' href=''>View All</a>
</div>
<div class='widget-content'>
<b:include name='snippetedPosts'/>
</div>
</b:includable>
<b:includable id='postLabels'>
<span class='byline post-labels'>
<span class='byline-label'>Genre: </span>
<b:loop index='i' values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>,
</b:loop>
</span>
</b:includable>
<b:includable id='snippetedPostContent'>
<div class='post-content'>
<b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
</div>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<div class='item-thumbnail relative overlay'>
<a class='block ov-img b-img' expr:href='data:post.url'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [172, 244], imageRatio: "1:2", sourceSizes: "272px" }' name='responsiveImage'/>
<span class='counter'/>
</a>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
</div>
</b:includable>
<b:includable id='snippetedPostTitle'>
<b:if cond='data:post.title != ""'>
<div class='ov-title'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div class='genre-date'>
<b:include name='postLabels'/>
<div class='date mt-5'><data:post.date/></div>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='snippetedPosts'>
<div class='grid-col' role='feed'>
<!-- Don't render the post that we're currently already looking at. -->
<b:loop values='data:posts filter (p => p.id != data:view.postId)' var='post'>
<section class='post' role='article'>
<b:include name='snippetedPostContent'/>
</section>
</b:loop>
</div>
</b:includable>
</b:widget>
This is the code that i have:
<div class="news-container">
<div class="flex_column av_two_third flex_column_div first">
<div class="news-date"><h2>jan 2015</h2></div>
<div class="news-entry">
<div class="news-title"><h2>new title</h2></div>
<div class="news-source">wearhouse</div>
<div class="news-content">excerpt goes here.</div>
</div>
</div>
<div class="flex_column av_one_third flex_column_div">myimage</div>
</div>
how can i get the image to float in the middle vertically of it's div.
i tried adding this code:
.img{
position: absolute;
top: 50%;
margin-top: -100px;
}
but because i have padding of 30px on the news containter it doesn't seem to work properly.
I have my live page at:
http://nodal.rudtek.com/about-us/press-room/news-features/
Try using line-height, usually it works perfectly for me, so chances are it will for you too. Hope it helps.
I am creating a horizontal list of images with descriptions that scale with browser height. The descriptions are fixed-width and the images preserve their aspect ratio. Here's my code:
HTML
<main>
<ol id="projects">
<li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li>
</ol>
</main>
CSS
html,body,main,#projects{
height:100%;
}
#projects {
width:1000px;
float:left;
overflow:visible;
white-space:nowrap;
}
.project {
height:100%;
display:inline-block;
}
.desc{
background-color:#afa;
float:right;
width:10em;
height:100%;
}
.preview{
float:left;
height:100%;
width:auto;
}
.preview img{
height:100%;
min-width:10px;
}
Here's the JSFiddle
When the page is first loaded, the images behave as desired. However, as soon as the viewport is resized vertically, they lose their aspect ratio. However, if one reloads the page with the new viewport dimensions, the images behave correctly again. See the GIF:
Is this my error, a browser error, or some combination of the two? Is there an alternative way to achieve my goal?