Comments (5)
Instead s-table__simple
maybe explore classes that undid specific things, i.e. s-table__borderless
removes all borders.
from stacks.
@hellohynes @aaronshekey @UXPiper I created a branch for this... couple questions before I start.
-
Should we add this on to the existing tables page? I think yes, but am open if you think it should be it's own component.
-
What should we call these more complex tables?
[ ] Dashboard table
[ ] Data table (well all tables are data tables)
[ ] Complex table
[ ] something else
from stacks.
I think that the default table could be the complex table, and we switch the barebones to a modifier that strips those things. s-table
looks like those complex tables, and then s-table s-table__simple
is just that, simple.
from stacks.
Adding code that I worked on to help replicate the complex code design. Hoping it's some assistance to @TedGoas
<table class="s-table bc-black-2 mt12 s-table__bordered fc-black-700">
<thead class="bg-black-025 bt bc-black-2 fs-category">
<tr>
<th scope="col" class="bc-black-2">@_s("Source")</th>
<th scope="col" class="bc-black-2" colspan="2">@_s("Job listing visits")</th>
<th scope="col" class="bc-black-2" colspan="2">@_s("% of total")</th>
</tr>
</thead>
<tbody>
@{ var maxClicks = Model.Referrers.Max(r => r.ClickCount);}
@foreach (var referrer in Model.Referrers)
{
var percentage = 100 * referrer.ClickCount / maxClicks;
<tr>
<td scope="row">@(string.IsNullOrEmpty(referrer.Url) ? _s("Direct URL or no referrer specified") : referrer.Url)</td>
<td class="ta-right brw0">@Localize.Numbers.CommaSeparated(referrer.ClickCount)</td>
<td class="va-middle blw0" width="116">
<div class="s-progress bg-white" id="brandprogress">
<div class="s-progress--bar bg-powder-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="@percentage" style="width: @percentage%"></div>
</div>
</td>
<td class="ta-right brw0 pr0">@Localize.Numbers.Percentage(referrer.Percentage)</td>
<td class="ps-relative blw0" width="38"><span class="d-inline-block ps-absolute" style="height:28px; width:28px; top: -2px;"><canvas class="js-pie-chart" data-percentage="@((int)Math.Ceiling(referrer.Percentage * 100))"></canvas></span></td>
</tr>
}
</tbody>
</table>
This removes borders between numbers and graphs.
I also had to do some absolute positioning for the stupid chart.js pie charts that came in with an extra wide canvas that I couldn't seem to trim down.
from stacks.
TBH I misread the comments above and started building classes on top of .s-table
instead of making .s-table
The New Default and creating classes to undo things for simpler tables. My bad. I'll re-organized what I've done so far.
I did a quick search on Core for .s-table
and found about 20-30 instances (and much of it looks recent), so I agree it's safe to change the default without worry too much about breaking something in the wild.
from stacks.
Related Issues (20)
- Remove references to Jobs in examples in Grammar and mechanics guide
- Button group does not use aria-current to indicate selected option
- Notify users of input validation with aria-live
- Pagination missing aria-current label
- ! HOT 1
- Tooltip flickers when hovering SVG HOT 4
- "align-items: start" has mixed support HOT 1
- `s-table__bx` has a 2px gap between cell borders HOT 1
- Eliminate need for clip-path on `.s-expandable` HOT 1
- Support deletion state for post summary child answers
- Accordion example jitters because of scroll bar
- Navigational dropdown item documentation incomplete
- Stacks.Razor repo link broken HOT 2
- Stacks - how to use it? HOT 1
- Mso Email Template Button is not visible on Outlook Web HOT 1
- More editor related icons HOT 2
- Css Grid HOT 1
- Illegal HTML in example on input component page HOT 1
- adb shell pm grant com.arumcomm.androiddevinfo android.permission.PACKAGE_USAGE_STATS adb shell pm grant com.arumcomm.androiddevinfo android.permission.READ_LOGS
- Responsive class `.pb0` does not work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stacks.