Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Waterfall UI updates #113

Merged
merged 10 commits into from
Aug 17, 2023
Merged

Waterfall UI updates #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b2b8e5a
WIP
csharpfritz Aug 15, 2023
a4787e6
Merge branch 'main' into feature_WaterfallUi
csharpfritz Aug 15, 2023
97e65c6
Moved pages and updated tests
csharpfritz Aug 15, 2023
d53f93e
Added slide in menu and pinned the title to the top of the screen
csharpfritz Aug 15, 2023
db216c0
Merge branch 'main' into feature_WaterfallUi
csharpfritz Aug 15, 2023
48f2f6a
Added preview card to overlay
csharpfritz Aug 15, 2023
beda63a
Merge branch 'main' into feature_WaterfallUi
csharpfritz Aug 17, 2023
cf99730
Merge branch 'main' into feature_WaterfallUi
csharpfritz Aug 17, 2023
43624a1
Added a server location for the default Mastodon address
csharpfritz Aug 17, 2023
dba0fb8
Completed design updates
csharpfritz Aug 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/TagzApp.Providers.Mastodon/MastodonProvider.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ public async Task<IEnumerable<Content>> GetContentForHashtag(Hashtag tag, DateTi

_NewestId = messages.OrderByDescending(m => m.id).First().id;

var baseServerAddress = _HttpClient.BaseAddress.Host.ToString();

return messages!.Select(m => new Content
{
Provider = Id,
Expand All @@ -62,7 +64,7 @@ public async Task<IEnumerable<Content>> GetContentForHashtag(Hashtag tag, DateTi
Author = new Creator
{
DisplayName = m.account!.display_name,
UserName = m.account.acct,
UserName = m.account.acct + (m.account.acct.Contains("@") ? "" : $"@{baseServerAddress}" ),
ProviderId = Id,
ProfileImageUri = new Uri(m.account.avatar_static),
ProfileUri = new Uri(m.account.url)
Expand Down
5 changes: 4 additions & 1 deletion src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,4 +93,7 @@ button.accept-policy {
}
}


.container {
padding-right: 0 !important;
padding-left: 0 !important;
}
16 changes: 6 additions & 10 deletions src/TagzApp.Web/Pages/Waterfall.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,19 @@


<div class="modal fade show" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<h5 class="modal-title" id="modalTitle"></h5>
<div class="modal-time">
</div>
</div>
<img class="ProfilePicture" src="" alt="" />
<div class="author"></div>
<div class="authorUserName" title=""></div>
<i class="provider bi"></i>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="time"></div>
</div>

<div class="modal-body">
</div>
@* <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
*@
</div>
</div>
</div>
Expand Down
229 changes: 145 additions & 84 deletions src/TagzApp.Web/wwwroot/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
html {
font-size: 14px;
font-size: 14px;
}

@media (min-width: 768px) {
html {
font-size: 16px;
}
html {
font-size: 16px;
}
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
position: relative;
min-height: 100%;
position: relative;
min-height: 100%;
}

body {
margin-bottom: 60px;
margin-bottom: 60px;
}

#taggedContent {
width: 100%;
height: calc(100vh - 56px);
height: calc(100vh - 66px);
overflow-y: scroll;
background-color: #f5f5f5;
padding: 0.3em;
Expand All @@ -44,8 +44,8 @@ body {
cursor: pointer;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
display: grid;
grid-template-columns: 36px 1fr 16px;
grid-template-rows: 36px 14px 1fr 1fr;
grid-template-columns: 36px 1fr 16px;
grid-template-rows: 36px 14px auto 1fr;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
Expand All @@ -57,7 +57,7 @@ body {
border-radius: 50%;
}

#taggedContent .byline, #overlayDisplay .byline, #overlayDisplay.showPreview .byline{
#taggedContent .byline, #overlayDisplay .byline, #overlayDisplay.showPreview .byline {
grid-area: 1 / 2 / 2 / 3;
min-width: 170px;
overflow: hidden;
Expand All @@ -66,7 +66,7 @@ body {
}


#taggedContent .provider, #overlayDisplay .provider{
#taggedContent .provider, #overlayDisplay .provider {
grid-area: 1 / 3 / 2 / 4;
font-size: 20px;
}
Expand All @@ -76,23 +76,23 @@ body {
font-size: 20px;
}

#taggedContent .time, #overlayDisplay .time, #overlayDisplay.showPreview .time{
grid-area: 2 / 1 / 3 / 4;
color: #697882;
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
#taggedContent .time, #overlayDisplay .time, #overlayDisplay.showPreview .time {
grid-area: 2 / 1 / 3 / 4;
color: #697882;
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

#taggedContent .content, #overlayDisplay .content, #overlayDisplay.showPreview .content{
grid-area: 3 / 1 / 4 / 4;
display: block;
width: 100%;
line-height: 1.2em;
padding-bottom: 10px;
}
#taggedContent .content, #overlayDisplay .content, #overlayDisplay.showPreview .content {
grid-area: 3 / 1 / 4 / 4;
display: block;
width: 100%;
line-height: 1.2em;
/*padding-bottom: 10px;*/
}

#taggedContent .contentcard {
grid-area: 4 / 1 / 5 / 4;
Expand All @@ -104,51 +104,59 @@ body {
border-radius: 4px;
}

.content p {
margin: 0 auto 10px;
}

span.invisible {
display: none;
}

#overlayDisplay .contentcard {
grid-area: 1 / 4 / 3 / 5;
display: block;
max-width: 400px;
height: 282px;
text-align: right;
overflow:hidden;
border-radius:4px;
position: relative;
}

#overlayDisplay .contentcard img {
overflow: hidden;
border-radius: 4px;
max-width: 400px;
max-height: 282px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
position: relative;
}

#overlayDisplay .author {
color: #000;
font-family: Helvetica;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
#overlayDisplay .contentcard img {
border-radius: 4px;
max-width: 400px;
max-height: 282px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

#taggedContent .authorUserName {
color: #697882;
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-overflow: ellipsis;
overflow: hidden;
}
#overlayDisplay .author {
color: #000;
font-family: Helvetica;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

#taggedContent .authorUserName {
color: #697882;
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-overflow: ellipsis;
overflow: hidden;
}

/** Overlay Display **/

#overlayBody {
background-color: #00B140;
background-color: #00B140;
}

#overlayDisplay.show, #overlayDisplay.showPreview {
Expand All @@ -167,7 +175,7 @@ background-color: #00B140;
#overlayDisplay.show {
display: grid;
grid-template-columns: 36px 1fr 16px;
grid-template-rows: 36px 14px 1fr;
grid-template-rows: 36px 14px auto;
grid-column-gap: 10px;
grid-row-gap: 15px;
max-width: 600px;
Expand All @@ -187,34 +195,87 @@ background-color: #00B140;
font-family: Arial, Helvetica, sans-serif;
}

/*#overlayDisplay > span {
display: block;
.modal-body .contentcard {
border-radius: 4px;
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}

.modal-body .contentcard img {
border-radius: 4px;
max-width: 400px;
/*max-height: 300px;*/
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

#overlayDisplay .author {
font-weight: bold;
font-size: 1.2em;
text-align: left;
width: calc(100% - 1.1em);
overflow: hidden;
/** Modal display on Waterfall */
.modal-content {
border: 1px solid #E2E8ED;
border-radius: 20px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

#overlayDisplay .time {
text-align: left;
font-size: 0.8em;
font-weight: bold;
margin-bottom: 0.5em;
}
*/
/*#overlayDisplay .bi {
position: absolute;
right: 0.4em;
top: 0.4em;
}
#overlayDisplay img {
width: 40em;
padding: 2px;
.modal-header {
display: grid;
grid-template-columns: 36px 1fr 16px 16px;
grid-template-rows: 10px 10px 14px;
grid-column-gap: 10px;
grid-row-gap: 10px;
padding-bottom: 0.5rem;
}

*/
.modal-header .ProfilePicture {
grid-column: 1 / 2;
grid-row: 1 / 3;
width: 36px;
height: 36px;
border-radius: 50%;
}

.modal-header .author {
grid-column: 2 / 3;
grid-row: 1 / 2;
color: #000;
font-family: Helvetica;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.modal-header .authorUserName {
grid-column: 2 / 3;
grid-row: 2 / 3;
color: #697882;
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-overflow: ellipsis;
overflow: hidden;
}

.modal-header .provider {
font-size: 20px;
}

.modal-header .time {
grid-column: 1 / 3;
grid-row: 3 / 4;
color: #697882;
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.modal-header .btn-close {
padding-right: 0!important;
}
Loading
Loading