new collapsible text box widget
This commit is contained in:
Vendored
+6
@@ -20,6 +20,12 @@ $(function () {
|
||||
$notifs.addClass('hidden')
|
||||
}, 500)
|
||||
}, 2500)
|
||||
|
||||
$('.block-collapse').on('click', (e) => {
|
||||
$(e.target).closest('.block-collapse').addClass('reveal')
|
||||
}).on('dblclick', (e) => {
|
||||
$(e.target).closest('.block-collapse').removeClass('reveal')
|
||||
});
|
||||
})
|
||||
|
||||
// auto-alias
|
||||
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
.block-collapse {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
height: 1.7em;
|
||||
line-height: 1.7em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
width: 70%;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '▼';
|
||||
z-index: 10;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
&.reveal {
|
||||
max-height: unset !important; // override inline styles
|
||||
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+16
@@ -26,3 +26,19 @@
|
||||
.border-dotted {
|
||||
border-style: dotted !important;
|
||||
}
|
||||
|
||||
.last-p-mb-0 {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
.border-#{$color} {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 2px 3px rgba(black, .3);
|
||||
}
|
||||
|
||||
Vendored
+1
@@ -7,6 +7,7 @@ html {
|
||||
|
||||
@import "helpers";
|
||||
@import "fa-utils";
|
||||
@import "block-collapse";
|
||||
|
||||
@import "bootstrap-customizations/paginate";
|
||||
@import "bootstrap-customizations/card";
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 2px 3px rgba(black, .3);
|
||||
@extend .box-shadow;
|
||||
}
|
||||
|
||||
.card-header-extra {
|
||||
|
||||
@@ -15,9 +15,9 @@ $font-family-sans-serif: "IBM Plex Sans", "Droid Sans", "Helvetica Neue", "Helve
|
||||
$font-size-base: 1rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
$link-color: $gray-800;
|
||||
$link-color: darken($primary, 15%);
|
||||
$link-decoration: none;
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
$link-hover-color: darken($primary, 10%);
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
$card-cap-bg: lighten($primary, 5);
|
||||
|
||||
@@ -30,27 +30,9 @@
|
||||
|
||||
<div class="card-body">
|
||||
@if($user->bio)
|
||||
@if(mb_strlen($user->bio) > 250)
|
||||
<p id="bio-short mb-2" aria-hidden=true>
|
||||
@sr(About me:)
|
||||
{{mb_substr($user->bio, 0, 250)}}…
|
||||
<a class="text-muted small" @tooltip(Show more) href="#" onclick="$('#bio-short').addClass('hidden'); $('#bio-full').removeClass('hidden'); return false;">
|
||||
[more]
|
||||
</a>
|
||||
</p>
|
||||
<p id="bio-full" class="hidden mb-2">
|
||||
@sr(About me:)
|
||||
{{ $user->bio }}
|
||||
<a class="text-muted small" @tooltip(Collapse) href="#" onclick="$('#bio-full').addClass('hidden'); $('#bio-short').removeClass('hidden'); return false;">
|
||||
[collapse]
|
||||
</a>
|
||||
</p>
|
||||
@else
|
||||
<p class="mb-2">
|
||||
@sr(About me:)
|
||||
{{ $user->bio }}
|
||||
</p>
|
||||
@endif
|
||||
<div class="mb-3">
|
||||
{!! Widget::collapsible($user->bio, 350, '8em')->srPrefix('About me:') !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<table>
|
||||
|
||||
@@ -10,13 +10,68 @@
|
||||
<div class="row justify-content-center">
|
||||
<h2>{{ $table->title }}</h2>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="col-md-10">
|
||||
<div class="row mx-auto col-md-12 justify-content-center mb-1 border rounded px-0 py-2 box-shadow mb-3">
|
||||
<div class="col-md-6">
|
||||
@if($table->description)
|
||||
<p class="last-p-mb-0">
|
||||
<b>Description</b><br>
|
||||
{!! Widget::collapsible($table->description, 400, '8em') !!}
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@if($table->origin)
|
||||
<p class="last-p-mb-0">
|
||||
<b>Source</b><br>
|
||||
{{ $table->origin }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-4 border-left">
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th class="text-right pr-2">License</th>
|
||||
<td>{{ $table->license ?: 'CC0' }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="text-right pr-2">Created</th>
|
||||
<td>{{ $table->created_at->format("M j, Y") }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="text-right pr-2">Updated</th>
|
||||
<td>{{ $table->updated_at->format("M j, Y") }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="text-right pr-2">Revisions</th>
|
||||
<td>{{ $table->revisions()->count() }}</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-2 border-left">
|
||||
Right Column with buttons etc, maybe
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mb-2">
|
||||
<div class="col-md-12 d-flex">
|
||||
<nav class="text-center ml-auto" aria-label="Pages of the table">
|
||||
{{ $rows->links(null, ['ulClass' => 'mb-0']) }}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<table class="table table-hover table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
@foreach($columns as $col)
|
||||
<th>{{ $col->title }}</th>
|
||||
@endforeach
|
||||
@@ -25,7 +80,6 @@
|
||||
<tbody>
|
||||
@foreach($rows as $row)
|
||||
<tr>
|
||||
<td>#{{ $row->id }}</td>
|
||||
@php($rdata = json_decode($row['data'], true))
|
||||
@foreach($columns as $col)
|
||||
<td data-id="{{ $row->id }}">{{ $rdata[$col->name] }}</td>
|
||||
|
||||
Reference in New Issue
Block a user