diff --git a/CHANGELOG.md b/CHANGELOG.md index dcb557f4..d192017e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,87 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Visual changes + +- Move Older and Newer buttons on small screens to align their outer edges with the outer edges of the content above. Brings into line with larger screen sizes +- Always horizontally align like + save buttons with the stats tabs. Currently if there is an originally posted by the like + save buttons are aligned with that instead. Improves layout consistency and simplifies markup +- On posts that the user can edit the alt text is shown by default (the user doesn't have to toggle it visible). This simplifies the markup, styles, and javascript, and also helps to highlight to post authors if they have no alt text defined yet +- Moved the "remove from shake" button to be within the post header (used to be in the right hand gutter beside the header). Simpler markup and looks better +- Right aligned some buttons in the conversations view. Allows for a less cluttered layout without wasting heaps of vertical space + +### Use semantic tags on the outermost layers of most pages e.g. + +- `
` -> `
` +- `
` -> `
` +- `
` -> `
-
-
-
+
+

+
+
+
-
+
-
- -
-
+
diff --git a/src/areas/developer/examples/api-access.html b/src/areas/developer/examples/api-access.html index 6cb8cc1b..00058fc6 100644 --- a/src/areas/developer/examples/api-access.html +++ b/src/areas/developer/examples/api-access.html @@ -5,7 +5,7 @@
-
+

Allow Access?

Do you want to let this app read and write to your account?

@@ -23,6 +23,6 @@

Allow Access?

/>
-
+
diff --git a/src/areas/developer/examples/api-reference.html b/src/areas/developer/examples/api-reference.html index 0a9e94f4..d47fa690 100644 --- a/src/areas/developer/examples/api-reference.html +++ b/src/areas/developer/examples/api-reference.html @@ -5,2337 +5,2072 @@
-
-
- -
-
-
-
-
-
-
- -
-
-

- API Reference +

+ Serializations +

+

+ Responses from the MLTSHP API are + application/json responses that represent + the various MLTSHP API objects. Those objects are: +

+
+
+ shake +
+
+

+ A shake is a stream of files posted to MLTSHP by users. Shakes can + be user shakes, which every user has one of, or group shakes that + can have multiple posters. +

+ + + + + + + + + + + +
Contents: +
    +
  • + id – the shake’s numeric shake ID as a + number +
    • +
  • + name – the display title of the shake +
    • +
  • + owner – the + user + who created the shake +
    • +
  • + url – the URL of the shake on the + MLTSHP site +
    • +
  • + thumbnail_url – the URL of the shake’s + thumbnail logo image +
    • +
  • + description – the shake’s description + displayed under its logo on its page (optional) +
    • +
  • + type – the type of shake: either + user + or + group +
    • +
  • + created_at – the + time + when the shake was first created +
    • +
  • + updated_at – the + time + when the shake was last updated +
    • +
+
+
+
+
+
+ sharedfile +
+
+

+ A file that someone posted to a shake. A file can be either an + image or a link to a video. +

+ + + + + + + + + + + +
Contents: +
    +
  • + sharekey – the + sharekey + of the shared file +
    • +
  • + name – the filename of the shared file +
    • +
  • + user – the + user + who shared the file +
    • +
  • + title – the custom title the poster + gave the file (optional) +
    • +
  • + description – the caption displayed + under the file on its page (optional) +
    • +
  • + posted_at – the + time + the file was posted +
    • +
  • + permalink_page – the URL where the file + can be viewed on MLTSHP +
    • +
  • + width – the width of the file (image or + video embed) in pixels as a number +
    • +
  • + height – the height of the file (image + or video embed) in pixels as a number +
    • +
  • + views – the number of times the image + has been viewed +
    • +
  • + likes – the number of times the image + has been “liked” to someone’s favorites +
    • +
  • + saves – the number of times the image + has been saved to another shake +
    • +
  • + comments – the number of + comments + on the file +
    • +
  • + nsfw – whether the file has been marked + NSFW, and so is hidden by default when displayed on + MLTSHP (true for NSFW/hidden, + false for SFW/visible) +
    • +
  • + original_image_url – if the file is an + image, the URL of the image on MLTSHP +
    • +
  • + url – if the file is not an + image, the original URL of the shared item +
    • +
  • + pivot_id – a key that is used for + pagination. It varies based on the API method. +
    • +
  • + saved – flag indicating whether + authenticated user has already saved the sharedfile +
    • +
  • + liked – flag indicating whether + authenticated user has already liked the sharedfile +
    • +
+
+
+
+
+
+ sharekey +
+
+

+ The alphanumeric ID of a + sharedfile, such as + GK4N. These are the codes in the permalink page (and image URL) of + files posted to MLTSHP. +

+
+
+
+
+ timestamp +
+
+

+ Timestamps represent particular times when events occurred, such + as users posting files to shakes. Timestamps are always + represented in the MLTSHP API as ISO8601 timestamps in UTC (where + the timezone is + Z) with resolution to seconds (no microseconds). +

+
+
+
+
+ user +
+
+

+ A person with a MLTSHP account. Users own or manage shakes and + post files in them. +

+ + + + + + + + + + + +
Contents: +
    +
  • + id – the user’s numeric user ID as a + number +
    • +
  • name – the user’s username
    • +
  • + profile_image_url – the URL to the + user’s profile picture +
    • +
  • + about – a brief text blurb about the + user. Only available when querying the user resource. +
    • +
  • + website – the user’s URL. Only + available when querying the user resource. +
    • +
  • + shakes – the list of shakes that belong + to the user, including their main user shake. Only + available when querying the user resource. +
    • +
+
+
+
+
+
+ comment +
+
+

+ A traditional comment associated with a + sharedfile. +

+ + + + + + + + + + + +
Contents: +
    +
  • + body – the actual text body of the + comment +
    • +
  • + user – the + user + that posted the comment +
    • +
  • + posted_at – the + time + when the comment was posted +
    • +
+
+
+
+ +
+

+ Resources +

+

The resources (URL endpoints) in the MLTSHP API are:

+
+
+ GET /api/favorites +
+
+
+
+
+ GET /api/favorites/before/(beforekey) +
+
+
+
+
+ GET /api/favorites/after/(afterkey) +
+
+

+ Returns the files the authorized user has “liked” most recently + (or as specified). +

+

+ Use the + before/beforekey + and + after/afterkey + variations to page through the user’s favorites. That is, specify + the last + pivot_id as the key to the + before/beforekey + resource to get the page of files the user “liked” before the + current page. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + beforekey – the + pivot_id of the + file to show posts before +
    • +
  • + afterkey – the + pivot_id of the + file to show posts after +
    • +
+
Status Codes: +
    +
  • + 200 OK + – +

    + the response is the requested section of the user’s + favorites as an object containing: +

    + +
    • +
+
+
+
+
+
+ GET /api/friends +
+
+
+
+
+ GET /api/friends/before/(beforekey) +
+
+
+
+
+ GET /api/friends/after/(afterkey) +
+
+

+ Returns the files posted most recently (or as specified) by the + users whom the authorized user follows. +

+

+ Use the + before/beforekey + and + after/afterkey + variations to page through the user’s friend shake. That is, to + request the next page of a friend shake, specify the last + pivot_id in the current page + as the key to a + /api/friends/before/beforekey + request. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + beforekey – the + pivot_id of the + post to show posts before +
    • +
  • + afterkey – the + pivot_id of the + post to show posts after +
    • +
+
Status Codes: +
    +
  • + 200 OK + – +

    + the response is the requested section of friend shake + as an object containing: +

    + +
    • +
+
+
+
+
+
+ GET /api/magicfiles +
+
+
+
+
+ GET /api/magicfiles/before/(beforekey) +
+
+
+
+
+ GET /api/magicfiles/after/(afterkey) +
+
+

+ Returns the 10 most recent files accepted by the “magic” file + selection algorithm. Currently any files with 10 or more likes are + magic. +

+

+ Use the + before/beforekey + and + after/afterkey + variations to page through the sharedfiles. That is, specify the + last pivot_id as the key to + the + before/beforekey + resource to get the page of files saved before the current page. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + beforekey – the + pivot_id of the + file to show posts before +
    • +
  • + afterkey – the + pivot_id of the + file to show posts after +
    • +
+
Status Codes: +
    +
  • + 200 OK + – +

    + the response is the latest magic files as an object + containing: +

    + +
    • +
+
+
+
+
+
+ GET /api/incoming +
+
+
+
+
+ GET /api/incoming/before/(beforekey) +
+
+
+
+
+ GET /api/incoming/after/(afterkey) +
+
+

Returns the 10 most recently posted sharedfiles.

+

+ Use the + before/beforekey + and + after/afterkey + variations to page through the sharedfiles. That is, specify the + last pivot_id as the key to + the + before/beforekey + resource to get the page of files saved before the current page. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + beforekey – the + pivot_id of the + file to show posts before +
    • +
  • + afterkey – the + pivot_id of the + file to show posts after +
    • +
+
Status Codes: +
    +
  • + 200 OK + – +

    + the response is the latest files as an object + containing: +

    + +
    • +
+
+
+
+
+
+ GET /api/shakes/(id) +
+
+
+
+
+ GET /api/shakes/(id)/before/(beforekey) +
+
+
+
+
+ GET /api/shakes/(id)/after/(afterkey) +
+
+

+ Returns the sharedfiles for the specified shake in reverse + chronological order. +

+

+ Use the + before/beforekey + and + after/afterkey + variations to page through the sharefiles. That is, specify the + last pivot_id as the key to + the + before/beforekey + resource to get the page of files saved before the current page. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + beforekey – the + pivot_id of the + file to show posts before +
    • +
  • + afterkey – the + pivot_id of the + file to show posts after +
    • +
+
Status Codes: +
    +
  • + 200 OK + – +

    + the response is the requested section of shake’s + sharedfiles: +

    + +
    • +
  • + 401 Unauthorized + – authentication failed +
    • +
+
+
+
+
+
+ GET /api/shake_id/(int: shakeid) +
+
+

+ Returns information for the shake with the given numeric shake ID. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • shakeid – the shake’s numeric ID
    • +
+
Status Codes: + +
+
+
+
+
+ GET /api/shake_name/(shakepathname) +
+
+

Returns information for the shake with the given pathname.

+

+ Note that name in this case refers to the URL path to the shake. + e.g., for + https://mltshp.com/weloveamberandandre + the pathname is weloveamberandandre. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + shakepathname – the shake’s pathname +
    • +
+
Status Codes: + +
+
+
+
+
+ GET /api/shake_user/(username) +
+
+

+ Returns information for the shake belonging to the specified user. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • username – the user’s username
    • +
+
Status Codes: + +
+
+
+
+
+ GET /api/shakes +
+
+

Returns the authorized user’s shakes.

+ + + + + + + + + + + +
Status Codes: +
    +
  • + 200 OK + – +

    the response is an object containing:

    +
      +
    • + shakes – a list of the user’s + shakes +
      • +
    +
    • +
  • + 401 Unauthorized + – authentication failed +
    • +
+
+
+
+
+
+ GET /api/sharedfile/(sharekey) +
+
+

Returns information for the file with the given share key.

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + sharekey – the + sharekey + of the file +
    • +
+
Status Codes: + +
+
+
+
+
+ POST /api/sharedfile/(sharekey) +
+
+

Update sharedfile’s editable details.

+ + + + + + + + + + + + + + + + + + + + + + +
Parameters: +
    +
  • + sharekey – the + sharekey + of the file +
    • +
+
Form Parameters:
  +
    +
  • + title – text for the image title + (optional) +
    • +
  • + description – text for the image + description (optional) +
    • +
+
Status Codes: +
    +
  • + 200 OK + – the response is a + sharedfile + for the requested file +
    • +
  • + 403 Forbidden + – the file could not be updated due to permission issues +
    • +
  • + 404 Not Found + – no such file with that share key +
    • +
+
+
+
+
+
+ POST /api/sharedfile/(sharekey)/like +
+
+

+ “Likes” the file with the given sharekey as the authorized user. + The file is then available in the user’s favorites. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + sharekey – the + sharekey + of the file to like +
    • +
+
Status Codes: +
    +
  • + 200 OK + – the file was liked, and the response is the liked + sharedfile +
    • +
  • + 400 Bad Request + – the file could not be liked, probably because the + authorized user already liked it +
    • +
  • + 404 Not Found + – no such file with that share key +
    • +
+
+
+
+
+
+ POST /api/sharedfile/(sharekey)/save +
+
+

+ “Saves” the file with the given sharekey as the authorized user. + By default the file is saved to the user’s shake unless the + shake_id parameter is provided. +

+ + + + + + + + + + + + + + + + + + + + + + +
Parameters: +
    +
  • + sharekey – the + sharekey + of the file to save +
    • +
+
Form Parameters:
  +
    +
  • + shake_id – the id of the destination + shake + the file should be saved to (optional) +
    • +
+
Status Codes: +
    +
  • + 200 OK + – the file was saved, and the response is the saved + sharedfile +
    • +
  • + 400 Bad Request + – the file could not be saved, probably because the file + belongs to the authenticated user +
    • +
  • + 403 Forbidden + – the file could not be saved due to permission issues +
    • +
  • + 404 Not Found + – no such file with that share key or no such shake +
    • +
+
+
+
+
+
+ GET /api/sharedfile/(sharekey)/comments +
+
+

+ Returns a list of + comments - -

-

- Serializations -

-

- Responses from the MLTSHP API are - application/json responses that - represent the various MLTSHP API objects. Those objects are: -

-
-
- shake -
-
-

- A shake is a stream of files posted to MLTSHP by users. - Shakes can be user shakes, which every user has one of, or - group shakes that can have multiple posters. -

- - - - - - - - - - - -
Contents: -
    -
  • - id – the shake’s numeric shake ID - as a number -
    • -
  • - name – the display title of the - shake -
    • -
  • - owner – the - user - who created the shake -
    • -
  • - url – the URL of the shake on the - MLTSHP site -
    • -
  • - thumbnail_url – the URL of the - shake’s thumbnail logo image -
    • -
  • - description – the shake’s - description displayed under its logo on its page - (optional) -
    • -
  • - type – the type of shake: either - user - or - group -
    • -
  • - created_at – the - time - when the shake was first created -
    • -
  • - updated_at – the - time - when the shake was last updated -
    • -
-
-
-
-
-
- sharedfile -
-
-

- A file that someone posted to a shake. A file can be either - an image or a link to a video. -

- - - - - - - - - - - -
Contents: -
    -
  • - sharekey – the - sharekey - of the shared file -
    • -
  • - name – the filename of the shared - file -
    • -
  • - user – the - user - who shared the file -
    • -
  • - title – the custom title the - poster gave the file (optional) -
    • -
  • - description – the caption - displayed under the file on its page (optional) -
    • -
  • - posted_at – the - time - the file was posted -
    • -
  • - permalink_page – the URL where - the file can be viewed on MLTSHP -
    • -
  • - width – the width of the file - (image or video embed) in pixels as a number -
    • -
  • - height – the height of the file - (image or video embed) in pixels as a number -
    • -
  • - views – the number of times the - image has been viewed -
    • -
  • - likes – the number of times the - image has been “liked” to someone’s favorites -
    • -
  • - saves – the number of times the - image has been saved to another shake -
    • -
  • - comments – the number of - comments - on the file -
    • -
  • - nsfw – whether the file has been - marked NSFW, and so is hidden by default when - displayed on MLTSHP (true for - NSFW/hidden, false for SFW/visible) -
    • -
  • - original_image_url – if the file - is an image, the URL of the image on MLTSHP -
    • -
  • - url – if the file is - not an image, the original URL of the - shared item -
    • -
  • - pivot_id – a key that is used for - pagination. It varies based on the API method. -
    • -
  • - saved – flag indicating whether - authenticated user has already saved the - sharedfile -
    • -
  • - liked – flag indicating whether - authenticated user has already liked the - sharedfile -
    • -
-
-
-
-
-
- sharekey -
-
-

- The alphanumeric ID of a - sharedfile, such as - GK4N. These are the codes in the permalink page (and image URL) - of files posted to MLTSHP. -

-
-
-
-
- timestamp -
-
-

- Timestamps represent particular times when events occurred, - such as users posting files to shakes. Timestamps are always - represented in the MLTSHP API as ISO8601 timestamps in UTC - (where the timezone is - Z) with resolution to seconds (no microseconds). -

-
-
-
-
- user -
-
-

- A person with a MLTSHP account. Users own or manage shakes - and post files in them. -

- - - - - - - - - - - -
Contents: -
    -
  • - id – the user’s numeric user ID - as a number -
    • -
  • name – the user’s username
    • -
  • - profile_image_url – the URL to - the user’s profile picture -
    • -
  • - about – a brief text blurb about - the user. Only available when querying the user - resource. -
    • -
  • - website – the user’s URL. Only - available when querying the user resource. -
    • -
  • - shakes – the list of shakes that - belong to the user, including their main user - shake. Only available when querying the user - resource. -
    • -
-
-
-
-
-
- comment -
-
-

- A traditional comment associated with a - sharedfile. -

- - - - - - - - - - - -
Contents: -
    -
  • - body – the actual text body of - the comment -
    • -
  • - user – the - user - that posted the comment -
    • -
  • - posted_at – the - time - when the comment was posted -
    • -
-
-
-
-
-
-

- Resources -

-

The resources (URL endpoints) in the MLTSHP API are:

-
-
- GET /api/favorites -
-
-
-
-
- GET /api/favorites/before/(beforekey) -
-
-
-
-
- GET /api/favorites/after/(afterkey) -
-
-

- Returns the files the authorized user has “liked” most - recently (or as specified). -

-

- Use the - before/beforekey - and - after/afterkey - variations to page through the user’s favorites. That is, - specify the last - pivot_id as the key to - the - before/beforekey - resource to get the page of files the user “liked” before - the current page. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - beforekey – the - pivot_id of - the file to show posts before -
    • -
  • - afterkey – the - pivot_id of - the file to show posts after -
    • -
-
Status Codes: -
    -
  • - 200 OK - – -

    - the response is the requested section of the - user’s favorites as an object containing: -

    - -
    • -
-
-
-
-
-
- GET /api/friends -
-
-
-
-
- GET /api/friends/before/(beforekey) -
-
-
-
-
- GET /api/friends/after/(afterkey) -
-
-

- Returns the files posted most recently (or as specified) by - the users whom the authorized user follows. -

-

- Use the - before/beforekey - and - after/afterkey - variations to page through the user’s friend shake. That is, - to request the next page of a friend shake, specify the last - pivot_id in the current - page as the key to a - /api/friends/before/beforekey - request. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - beforekey – the - pivot_id of - the post to show posts before -
    • -
  • - afterkey – the - pivot_id of - the post to show posts after -
    • -
-
Status Codes: -
    -
  • - 200 OK - – -

    - the response is the requested section of friend - shake as an object containing: -

    - -
    • -
-
-
-
-
-
- GET /api/magicfiles -
-
-
-
-
- GET /api/magicfiles/before/(beforekey) -
-
-
-
-
- GET /api/magicfiles/after/(afterkey) -
-
-

- Returns the 10 most recent files accepted by the “magic” - file selection algorithm. Currently any files with 10 or - more likes are magic. -

-

- Use the - before/beforekey - and - after/afterkey - variations to page through the sharedfiles. That is, specify - the last pivot_id as - the key to the - before/beforekey - resource to get the page of files saved before the current - page. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - beforekey – the - pivot_id of - the file to show posts before -
    • -
  • - afterkey – the - pivot_id of - the file to show posts after -
    • -
-
Status Codes: -
    -
  • - 200 OK - – -

    - the response is the latest magic files as an - object containing: -

    - -
    • -
-
-
-
-
-
- GET /api/incoming -
-
-
-
-
- GET /api/incoming/before/(beforekey) -
-
-
-
-
- GET /api/incoming/after/(afterkey) -
-
-

Returns the 10 most recently posted sharedfiles.

-

- Use the - before/beforekey - and - after/afterkey - variations to page through the sharedfiles. That is, specify - the last pivot_id as - the key to the - before/beforekey - resource to get the page of files saved before the current - page. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - beforekey – the - pivot_id of - the file to show posts before -
    • -
  • - afterkey – the - pivot_id of - the file to show posts after -
    • -
-
Status Codes: -
    -
  • - 200 OK - – -

    - the response is the latest files as an object - containing: -

    - -
    • -
-
-
-
-
-
- GET /api/shakes/(id) -
-
-
-
-
- GET /api/shakes/(id)/before/(beforekey) -
-
-
-
-
- GET /api/shakes/(id)/after/(afterkey) -
-
-

- Returns the sharedfiles for the specified shake in reverse - chronological order. -

-

- Use the - before/beforekey - and - after/afterkey - variations to page through the sharefiles. That is, specify - the last pivot_id as - the key to the - before/beforekey - resource to get the page of files saved before the current - page. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - beforekey – the - pivot_id of - the file to show posts before -
    • -
  • - afterkey – the - pivot_id of - the file to show posts after -
    • -
-
Status Codes: -
    -
  • - 200 OK - – -

    - the response is the requested section of shake’s - sharedfiles: -

    - -
    • -
  • - 401 Unauthorized - – authentication failed -
    • -
-
-
-
-
-
- GET /api/shake_id/(int: shakeid) -
-
-

- Returns information for the shake with the given numeric - shake ID. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - shakeid – the shake’s numeric ID -
    • -
-
Status Codes: - -
-
-
-
-
- GET /api/shake_name/(shakepathname) -
-
-

- Returns information for the shake with the given pathname. -

-

- Note that name in this case refers to the URL path to the - shake. e.g., for - https://mltshp.com/weloveamberandandre - the pathname is weloveamberandandre. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - shakepathname – the shake’s - pathname -
    • -
-
Status Codes: - -
-
-
-
-
- GET /api/shake_user/(username) -
-
-

- Returns information for the shake belonging to the specified - user. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - username – the user’s username -
    • -
-
Status Codes: - -
-
-
-
-
- GET /api/shakes -
-
-

Returns the authorized user’s shakes.

- - - - - - - - - - - -
Status Codes: -
    -
  • - 200 OK - – -

    the response is an object containing:

    -
      -
    • - shakes – a list of the user’s - shakes -
      • -
    -
    • -
  • - 401 Unauthorized - – authentication failed -
    • -
-
-
-
-
-
- GET /api/sharedfile/(sharekey) -
-
-

- Returns information for the file with the given share key. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - sharekey – the - sharekey - of the file -
    • -
-
Status Codes: - -
-
-
-
-
- POST /api/sharedfile/(sharekey) -
-
-

Update sharedfile’s editable details.

- - - - - - - - - - - - - - - - - - - - - - -
Parameters: -
    -
  • - sharekey – the - sharekey - of the file -
    • -
-
Form Parameters:
  -
    -
  • - title – text for the image title - (optional) -
    • -
  • - description – text for the image - description (optional) -
    • -
-
Status Codes: -
    -
  • - 200 OK - – the response is a - sharedfile - for the requested file -
    • -
  • - 403 Forbidden - – the file could not be updated due to permission - issues -
    • -
  • - 404 Not Found - – no such file with that share key -
    • -
-
-
-
-
-
- POST /api/sharedfile/(sharekey)/like -
-
-

- “Likes” the file with the given sharekey as the authorized - user. The file is then available in the user’s favorites. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - sharekey – the - sharekey - of the file to like -
    • -
-
Status Codes: -
    -
  • - 200 OK - – the file was liked, and the response is the - liked - sharedfile -
    • -
  • - 400 Bad Request - – the file could not be liked, probably because - the authorized user already liked it -
    • -
  • - 404 Not Found - – no such file with that share key -
    • -
-
-
-
-
-
- POST /api/sharedfile/(sharekey)/save -
-
-

- “Saves” the file with the given sharekey as the authorized - user. By default the file is saved to the user’s shake - unless the shake_id parameter is provided. -

- - - - - - - - - - - - - - - - - - - - - - -
Parameters: -
    -
  • - sharekey – the - sharekey - of the file to save -
    • -
-
Form Parameters:
  -
    -
  • - shake_id – the id of the - destination - shake - the file should be saved to (optional) -
    • -
-
Status Codes: -
    -
  • - 200 OK - – the file was saved, and the response is the - saved - sharedfile -
    • -
  • - 400 Bad Request - – the file could not be saved, probably because - the file belongs to the authenticated user -
    • -
  • - 403 Forbidden - – the file could not be saved due to permission - issues -
    • -
  • - 404 Not Found - – no such file with that share key or no such - shake -
    • -
-
-
-
-
-
- GET /api/sharedfile/(sharekey)/comments -
-
-

- Returns a list of - comments - for the sharedfile with the given sharekey. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - sharekey – the - sharekey - of the file -
    • -
-
Status Codes: - -
-
-
-
-
- POST /api/sharedfile/(sharekey)/comments -
-
-

- Posts a new - comment - on behalf of the authenticated user to the - sharedfile - referenced with the given - sharekey. -

- - - - - - - - - - - - - - - - - - - - - - -
Parameters: -
    -
  • - sharekey – the - sharekey - of the file -
    • -
-
Form Parameters:
  -
    -
  • - body – the text contents of the - comment -
    • -
-
Status Codes: -
    -
  • - 404 Not Found - – no such file with that - sharekey - or no such shake -
    • -
  • - 400 Bad Request - – the comment could not be saved due to a missing - parameter or failed spam check -
    • -
  • - 200 OK - – the newly posted - comment - object -
    • -
-
-
-
-
-
- POST /api/upload -
-
-

- Adds the submitted image to a shake. Images should be - provided as - multipart/form-data request - bodies. -

- - - - - - - - - - - - - - - - - - -
Form Parameters:
  -
    -
  • - file – the file data of the image - to upload -
    • -
  • - shake_id – numeric ID of the - shake to post to (optional) -
    • -
  • - title – text for the image title - (optional) -
    • -
  • - description – text for the image - description (optional) -
    • -
-
Status Codes: -
    -
  • - 201 Created - – the image was posted to the shake, and the - response body is an abbreviated - sharedfile - representing it, containing only - sharekey - and name -
    • -
  • - 400 Bad Request - – the file could not be identified as an image -
    • -
-
-
-
-
-
- GET /api/user -
-
-

Returns the authorized user.

- - - - - - - - - - - -
Status Codes: -
    -
  • - 200 OK - – the response is the requested - user -
    • -
-
-
-
-
-
- GET /api/user_id/(int: userid) -
-
-

- Returns information for the user with the given numeric user - ID. -

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - userid (int) – the - user’s numeric ID -
    • -
-
Status Codes: - -
-
-
-
-
- GET /api/user_name/(username) -
-
-

Returns the user with the given username.

- - - - - - - - - - - - - - - -
Parameters: -
    -
  • - username – the user’s username -
    • -
-
Status Codes: - -
-
-
-
-
-
-
+ for the sharedfile with the given sharekey. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + sharekey – the + sharekey + of the file +
    • +
+
Status Codes: + +
+ + +
+
+ POST /api/sharedfile/(sharekey)/comments +
+
+

+ Posts a new + comment + on behalf of the authenticated user to the + sharedfile + referenced with the given + sharekey. +

+ + + + + + + + + + + + + + + + + + + + + + +
Parameters: +
    +
  • + sharekey – the + sharekey + of the file +
    • +
+
Form Parameters:
  +
    +
  • + body – the text contents of the + comment +
    • +
+
Status Codes: +
    +
  • + 404 Not Found + – no such file with that + sharekey + or no such shake +
    • +
  • + 400 Bad Request + – the comment could not be saved due to a missing + parameter or failed spam check +
    • +
  • + 200 OK + – the newly posted + comment + object +
    • +
+
+
+
+
+
+ POST /api/upload +
+
+

+ Adds the submitted image to a shake. Images should be provided as + multipart/form-data request bodies. +

+ + + + + + + + + + + + + + + + + + +
Form Parameters:
  +
    +
  • + file – the file data of the image to + upload +
    • +
  • + shake_id – numeric ID of the shake to + post to (optional) +
    • +
  • + title – text for the image title + (optional) +
    • +
  • + description – text for the image + description (optional) +
    • +
+
Status Codes: +
    +
  • + 201 Created + – the image was posted to the shake, and the response + body is an abbreviated + sharedfile + representing it, containing only + sharekey + and name +
    • +
  • + 400 Bad Request + – the file could not be identified as an image +
    • +
+
+
+
+
+
+ GET /api/user +
+
+

Returns the authorized user.

+ + + + + + + + + + + +
Status Codes: +
    +
  • + 200 OK + – the response is the requested + user +
    • +
+
+
+
+
+
+ GET /api/user_id/(int: userid) +
+
+

+ Returns information for the user with the given numeric user ID. +

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • + userid (int) – the user’s + numeric ID +
    • +
+
Status Codes: + +
+
+
+
+
+ GET /api/user_name/(username) +
+
+

Returns the user with the given username.

+ + + + + + + + + + + + + + + +
Parameters: +
    +
  • username – the user’s username
    • +
+
Status Codes: + +
+
+
+
-
diff --git a/src/areas/faq/examples/faq.html b/src/areas/faq/examples/faq.html index b0a269d5..5ed03627 100644 --- a/src/areas/faq/examples/faq.html +++ b/src/areas/faq/examples/faq.html @@ -5,66 +5,63 @@
-
-
-

Frequently Asked Questions

+
+

Frequently Asked Questions

-

What is going on here?

-

- MLTSHP is an approximate clone of the much-loved site MLKSHK created - by Andre and Amber which closed in April of 2017. We - are 100% community funded and member-run. The site is - subscription-based and is a registered corporation. - The code is on Github along with - a welcome module there which talks about what is going - on. There is also a Slack (email hello@mltshp.com for - an invite!) and a Facebook group. -

+

What is going on here?

+

+ MLTSHP is an approximate clone of the much-loved site MLKSHK created by + Andre and Amber which closed in April of 2017. We are + 100% community funded and member-run. The site is subscription-based and + is a registered corporation. The code is on Github along + with a welcome module there which talks about what is + going on. There is also a Slack (email + hello@mltshp.com for an invite!) and + a Facebook group. +

-

What do the membership levels mean?

-

- Membership is required to participate on MLTSHP, but it‘s a low bar! - We‘d love to have you aboard! These are the options: -

-
    -
  • Non-members can see the Popular page and individual posts.
    • -
  • - The Single Scoop level ($3 per year) is a great way to check out the - site. Members can: -
      -
    • - Post images and videos to their own shakes and to group shakes, - up to a monthly upload limit of 300MB for images and animated - GIFs. -
      • -
    • - Follow their friends‘ shakes, and follow and join group shakes. -
      • -
    • Save, like, and comment on any posts.
      • -
    -
    • -
  • - The Double Scoop level ($24 per year) can do all of the above, plus: -
      -
    • There are no fixed upload limits.
      • -
    • Make up to 100 of their own group shakes.
      • -
    • Get a little plus sign next to their name.
      • -
    • Have RSS feeds for their shakes.
      • -
    - Even at just $2 per month, Double Scoop members cover the primary - expenses of running MLTSHP and help make the Single Scoop level - possible. -
    • -
-

- We ran some numbers and determined that with our current membership, - we could run the site if most users contributed $2/month. This - includes things like paying for storage, hosting, bandwidth, a - business license, someone to do our taxes and answer the odd legal - question we may have to ask. We added a “bare bones” membership - because we don‘t want anyone to be excluded. -

-
-
+

What do the membership levels mean?

+

+ Membership is required to participate on MLTSHP, but it‘s a low bar! + We‘d love to have you aboard! These are the options: +

+ +

+ We ran some numbers and determined that with our current membership, we + could run the site if most users contributed $2/month. This includes + things like paying for storage, hosting, bandwidth, a business license, + someone to do our taxes and answer the odd legal question we may have to + ask. We added a “bare bones” membership because we don‘t want anyone to + be excluded. +

+
diff --git a/src/areas/find-shakes/examples/find-people.html b/src/areas/find-shakes/examples/find-people.html index b6b88717..1a8890cd 100644 --- a/src/areas/find-shakes/examples/find-people.html +++ b/src/areas/find-shakes/examples/find-people.html @@ -5,13 +5,13 @@
-
-
+

Find Shakes to Follow

-
-
+ +
-
+
- + diff --git a/src/areas/find-shakes/examples/find-shakes.html b/src/areas/find-shakes/examples/find-shakes.html index 5551a497..3121b623 100644 --- a/src/areas/find-shakes/examples/find-shakes.html +++ b/src/areas/find-shakes/examples/find-shakes.html @@ -5,13 +5,13 @@
-
-
+

Find Shakes to Follow

-
-
+ +
-
+
-
+
diff --git a/src/areas/incoming/examples/incoming.html b/src/areas/incoming/examples/incoming.html index 19ad69fe..f4e36634 100644 --- a/src/areas/incoming/examples/incoming.html +++ b/src/areas/incoming/examples/incoming.html @@ -5,12 +5,12 @@
-
-
+
+

Our most recent files

-
+ -
+
-
-
-
- - - -
-

Beijing’s skyline taken from the Great Wall of China

-
-
-
-
- Beijing's skyline taken from the Great Wall of China -
-
-
-
- source: - https://twitter.com/vandille... +
-
-
- -
-
-
-
- - - - - -
    -
  • 23 Views
    • -
  • - 0 +
    +
    + tweedlydo + + pro + + + + + Reply +
    +
    + those are some righteous bazongas +
    +
    +
    • -
  • + +
    • +
  • +
    +
    + + + +
    +
    +
    + jonson + + pro + + + + + Reply +
    +
    + @tweedlydo more of an elbow man, meself. +
    +
    +
    • -
  • 0
- -
-
-
-
-
- - - -
-

Star Wars Zoom Backgrounds

-
-
-
- -
-
-
-
-
- Star Wars Zoom Backgrounds -
-
-
-
- Star Wars is jumping on the Zoom background train. I’m looking - forward to showing how clean I’ve kept my office with this - one.

You can find more at - https://www.starwars.com/news... -
-
-
- -
+
diff --git a/src/areas/legal/examples/announcement-tou.html b/src/areas/legal/examples/announcement-tou.html index acf470c5..1ce5df77 100644 --- a/src/areas/legal/examples/announcement-tou.html +++ b/src/areas/legal/examples/announcement-tou.html @@ -5,38 +5,36 @@
-
-
-

- Hi everyone and welcome to MLTSHP! We have an updated Terms of Use / - Privacy Policy document everyone today needs to agree to. Nothing that - different from before, but important because Legal Reasons. - We wanted to update it to be more up-front and open about the services - we utilize to make the magic that is MLTSHP. -

-

- By clicking this button, you agree to - the terms listed on this page - and our - Code of Conduct. -

-
- I Agree -
-

- We just wanted to make a great site and we know we wouldn‘t be doing - it without all of you showing up every day. So, thank you. - Be sure to check out our release notes! -

+
+

+ Hi everyone and welcome to MLTSHP! We have an updated Terms of Use / + Privacy Policy document everyone today needs to agree to. Nothing that + different from before, but important because Legal Reasons. We + wanted to update it to be more up-front and open about the services we + utilize to make the magic that is MLTSHP. +

+

+ By clicking this button, you agree to + the terms listed on this page + and our + Code of Conduct. +

+
+ I Agree
-
+

+ We just wanted to make a great site and we know we wouldn‘t be doing it + without all of you showing up every day. So, thank you. + Be sure to check out our release notes! +

+
diff --git a/src/areas/legal/examples/code-of-conduct.html b/src/areas/legal/examples/code-of-conduct.html index 3b7bd8c0..98adc374 100644 --- a/src/areas/legal/examples/code-of-conduct.html +++ b/src/areas/legal/examples/code-of-conduct.html @@ -5,27 +5,25 @@
-
-
-

MLTSHP Code of Conduct

+
+

MLTSHP Code of Conduct

-

TL;DR

-
    -
  • Be kind
    • -
  • Don‘t be a troll
    • -
  • Don’t harass the site or each other
    • -
  • Don’t dox the site or each other
    • -
  • Don‘t spam the site or each other
    • -
+

TL;DR

+
    +
  • Be kind
    • +
  • Don‘t be a troll
    • +
  • Don’t harass the site or each other
    • +
  • Don’t dox the site or each other
    • +
  • Don‘t spam the site or each other
    • +
-

Let’s keep MLTSHP a haven of awesomeness.

+

Let’s keep MLTSHP a haven of awesomeness.

-

Strive For More

-

- MLTSHP is special because we are honest, funny, and genuinely care - about each other. Here’s how you can be a part of this community: -

-
-
+

Strive For More

+

+ MLTSHP is special because we are honest, funny, and genuinely care about + each other. Here’s how you can be a part of this community: +

+
diff --git a/src/areas/legal/examples/terms-of-use.html b/src/areas/legal/examples/terms-of-use.html index 74fd5520..d2278adc 100644 --- a/src/areas/legal/examples/terms-of-use.html +++ b/src/areas/legal/examples/terms-of-use.html @@ -5,33 +5,30 @@
-
-
-

- We will not disclose, sell or exchange PI to or with anyone, without - your approval, unless we believe disclosure is reasonably necessary - to: -

+
+

+ We will not disclose, sell or exchange PI to or with anyone, without + your approval, unless we believe disclosure is reasonably necessary to: +

-
    -
  1. comply with the law or legal process;
    2. -
  2. - protect or defend our rights or property, or the rights or property - of others; -
    3. -
  3. enforce these Terms; or
    4. -
  4. - respond to claims that the content of any material on our system - violates the rights of others. -
    5. -
+
    +
  1. comply with the law or legal process;
    2. +
  2. + protect or defend our rights or property, or the rights or property of + others; +
    3. +
  3. enforce these Terms; or
    4. +
  4. + respond to claims that the content of any material on our system + violates the rights of others. +
    5. +
-

- We use your PI in various ways to provide access to our website and - service. We use PI to enhance your site experience in the following - ways: -

-
-
+

+ We use your PI in various ways to provide access to our website and + service. We use PI to enhance your site experience in the following + ways: +

+
diff --git a/src/areas/membership/examples/cancel.html b/src/areas/membership/examples/cancel.html index c4a28870..04b6c4bf 100644 --- a/src/areas/membership/examples/cancel.html +++ b/src/areas/membership/examples/cancel.html @@ -5,7 +5,7 @@
-
+

Canceling

Thanks for trying us out, we’re sorry to see you go but understand the @@ -31,6 +31,6 @@

Canceling

hello@mltshp.com and we’ll get back to you as soon as possible.

-
+
diff --git a/src/areas/membership/examples/membership.html b/src/areas/membership/examples/membership.html index b9e68f81..6bb5118d 100644 --- a/src/areas/membership/examples/membership.html +++ b/src/areas/membership/examples/membership.html @@ -5,7 +5,7 @@
-
+
MLTSHP is community-supported.
-
+
Your Current Plan @@ -58,7 +58,7 @@

Only $3/year

Single Scoop
-
+
@@ -66,7 +66,7 @@

Only $3/year

-
+

Double Scoop

Roughly equivalent to MLKSHK’s Pro account.

@@ -118,7 +118,7 @@

Only $24/year

Double Scoop
-
+
@@ -128,6 +128,6 @@

Only $24/year

brought back to your freshly made MLTSHP Paid Account.

-
+
diff --git a/src/areas/membership/examples/migrate-complete.html b/src/areas/membership/examples/migrate-complete.html index 493bc8bd..80eb3b0e 100644 --- a/src/areas/membership/examples/migrate-complete.html +++ b/src/areas/membership/examples/migrate-complete.html @@ -5,7 +5,7 @@
-
+

MLKSHK Restore Complete!

Thanks for joining MLTSHP and for all your posts!

@@ -17,6 +17,6 @@

MLKSHK Restore Complete!

value="Take me home!" /> -
+
diff --git a/src/areas/membership/examples/migrate.html b/src/areas/membership/examples/migrate.html index 56ed881c..7f435e3e 100644 --- a/src/areas/membership/examples/migrate.html +++ b/src/areas/membership/examples/migrate.html @@ -5,7 +5,7 @@
-
+

Restore Your MLKSHK Content?

@@ -45,6 +45,6 @@

Restore Your MLKSHK Content?

/>
-
+
diff --git a/src/areas/membership/examples/thank-you.html b/src/areas/membership/examples/thank-you.html index 59618186..08200de0 100644 --- a/src/areas/membership/examples/thank-you.html +++ b/src/areas/membership/examples/thank-you.html @@ -5,7 +5,7 @@
-
+

Thank You!

We really greatly appreciate your support. Having a MLTSHP membership @@ -13,6 +13,6 @@

Thank You!

hope you continue to enjoy MLTSHP as much as we do.

Now get out there and share some stuff!

-
+
diff --git a/src/areas/membership/examples/welcome.html b/src/areas/membership/examples/welcome.html index c57488a4..4f39bac5 100644 --- a/src/areas/membership/examples/welcome.html +++ b/src/areas/membership/examples/welcome.html @@ -5,7 +5,7 @@
-
+

Welcome to MLTSHP!

Hi, YourName! We are thrilled to have you join us here.

@@ -24,6 +24,6 @@

Welcome to MLTSHP!

value="Select Membership" /> -
+
diff --git a/src/areas/permalink/_permalink.scss b/src/areas/permalink/_permalink.scss index f48c7ae6..9c4ce7fc 100644 --- a/src/areas/permalink/_permalink.scss +++ b/src/areas/permalink/_permalink.scss @@ -4,98 +4,61 @@ // Area: Permalink // -// -// Legacy float-based layout -// .content-permalink { + display: flex; + flex-direction: column; + gap: var(--size-spacing-triple); padding: var(--size-spacing-half-again); - @media screen and (min-width: tokens.$size-breakpoint-lg) { - padding: var(--size-spacing-triple); + li + li .comment, + li + li .image-comment-form { + margin-top: var(--size-spacing-double); } - > * { - margin: 0 !important; - padding: 0 !important; - - + * { - margin-top: var(--size-spacing-half-again) !important; - - @media screen and (min-width: tokens.$size-breakpoint-lg) { - margin-top: var(--size-spacing-triple) !important; - } - } + .comment__avatar img { + height: var(--size-avatar-default); + width: var(--size-avatar-default); } - > .permalink-sidebar { - @media screen and (min-width: tokens.$size-breakpoint-lg) { - float: right; - width: 320px; - } - } - - > .image-content, - > .image-comments, - > .image-comment-form { - @media screen and (min-width: tokens.$size-breakpoint-lg) { - float: left; - width: calc(100% - 350px); - } - } -} - -// -// Fancy new grid-based layout -// -@supports (display: grid) { @media screen and (min-width: tokens.$size-breakpoint-lg) { - .content-permalink { + padding: var(--size-spacing-triple); + + .post { display: grid; grid-gap: var(--size-spacing-triple); grid-template-areas: 'title title' - 'image sidebar' - 'comments sidebar' - 'post-comment sidebar'; + 'content sidebar' + 'footer sidebar'; grid-template-columns: 1fr 320px; - // stylelint-disable-next-line declaration-block-no-redundant-longhand-properties - grid-template-rows: repeat(3, min-content) 1fr; - } - - .content-permalink > * { - margin: 0 !important; - } - - .content-permalink::after { - content: none; - } - .content-permalink > .permalink-sidebar, - .content-permalink > .image-content, - .content-permalink > .image-comments, - .content-permalink > .image-comment-form { - width: auto; - } + .post__title { + grid-area: title; + } - .content-permalink > .image-title { - grid-area: title; - } + .post__content { + grid-area: content; + } - .content-permalink > .image-content { - grid-area: image; + .post__footer { + grid-area: footer; + } } + } - .content-permalink > .permalink-sidebar { - grid-area: sidebar; - } + .permalink-sidebar { + grid-area: sidebar; + margin-bottom: var(--size-spacing-triple); + } +} - .content-permalink > .image-comments { - grid-area: comments; - } +@media screen and (min-width: tokens.$size-breakpoint-lg) { + .content-permalink > * { + margin: 0 !important; + } - .content-permalink > .image-comment-form { - grid-area: post-comment; - } + .content-permalink::after { + content: none; } } diff --git a/src/areas/permalink/examples/permalink.html b/src/areas/permalink/examples/permalink.html index 7fe321be..8d89666f 100644 --- a/src/areas/permalink/examples/permalink.html +++ b/src/areas/permalink/examples/permalink.html @@ -5,24 +5,36 @@
-
-
-

For When The Coroner Arrives

-
-
-
-
- For When The Coroner Arrives +
+
+
+

For When The Coroner Arrives

+
+
+
+ For When The Coroner Arrives +
+
+ Star Wars is jumping on the Zoom background train. I’m looking + forward to showing how clean I’ve kept my office with this one.

You + can find more at + https://www.starwars.com/news... +
-
-
-
- -
- -
- -
-
- lu4 hours ago -
-
- kplawver4 hours ago -
-
- macmanx3 hours ago -
-
- O_C3 hours ago -
-
- ftrain3 hours ago -
-
- Johnny3 hours ago -
-
- wjcstp3 hours ago -
-
- artwells2 hours ago -
-
- Sailormom2 hours ago -
-
- m3moellering2 hours ago -
-
- boffin2 hours ago -
-
- pkan hour ago -
-
- theloniusan hour ago -
-
- readeryan hour ago -
-
- sassquatchan hour ago -
-
- GroggyGrognardan hour ago -
-
- pankinan hour ago -
-
- devilsrancher50 minutes ago
-
-
-

Post URL

-

https://mltshp.com/p/1JQL0

-
-
-

Add To Shakes

-
-
- - -
-
-

In These Shakes

-
-
    + +
    • - Mazen Kerbaj +
      +
      + + + +
      +
      +
      + wjcstp + + pro + + + + + Reply +
      +
      + When weighing more was a selling point (for an economy car + yet) +
      +
      +
    • -
      - -
      - Your Shake +
      +
      + + + +
      +
      +
      + chauffi + + pro + + + + + Reply +
      +
      + You just can’t wash it or give it gas after Midnight +
      +
      +
    • -
      - +
      +
      + + + +
      +
      +
      + pk + + pro + + + + + Reply +
      +
      + Dog though bubble: “What fools these mortals be” +
      +
      +
      +
      • +
    • + +
      + +

      I’ve got something to say!

      +
      +
      + +
      +
      + +
      - Barbarella
-
    - - -
  • - Post to Tumblr -
    • -
-
- -
-
- -
-
-
-
-
- - - -
-
-
- wjcstp - +
-
-
- - - -
-
-
- chauffi - - pro - - - - - Reply -
-
- You just can’t wash it or give it gas after Midnight +
+
    +
  • + 311 Views +
    • +
  • + + 4 Saves + +
    • +
  • + + + +
    • +
+
+
+ lu4 hours ago +
+
+ kplawver4 hours ago +
+
+ macmanx3 hours ago +
+
+ O_C3 hours ago +
+
+ ftrain3 hours ago +
+
+ Johnny3 hours ago +
+
+ wjcstp3 hours ago +
+
+ artwells2 hours ago +
+
+ Sailormom2 hours ago +
+
+ m3moellering2 hours ago +
+
+ boffin2 hours ago +
+
+ pkan hour ago +
+
+ theloniusan hour ago +
+
+ readeryan hour ago +
+
+ sassquatchan hour ago +
+
+ GroggyGrognardan hour ago +
+
+ pankinan hour ago +
+
+ devilsrancher50 minutes ago +
-
-
-
- - - +
+

Post URL

+

https://mltshp.com/p/1JQL0

-
-
- pk - - pro - - - - - Reply -
-
- Dog though bubble: “What fools these mortals be” -
+
+

Add To Shakes

+
+
+ + +
-
-
-
-
-
- -

I’ve got something to say!

-
-
- +

In These Shakes

+
+
-
+
    + + +
  • + Post to Tumblr +
    • +
+
+ +
+
-
- -
-
+ + +
+
diff --git a/src/areas/relationships/_relationships.scss b/src/areas/relationships/_relationships.scss index 99ee2662..df82c974 100644 --- a/src/areas/relationships/_relationships.scss +++ b/src/areas/relationships/_relationships.scss @@ -2,13 +2,19 @@ // Area: Account - Following/Followers // .content-relationships { - .body { - .friend, - .shake { - border-bottom: 1px dashed var(--color-border-default); + .followers-list { + list-style-type: none; + margin: 0; + padding: 0; + + > li { padding: 0 var(--size-spacing-quadruple); } + > li:not(:last-child) { + border-bottom: 1px dashed var(--color-border-default); + } + .user-follow-extended { .website a { color: var(--color-brand-secondary); diff --git a/src/areas/relationships/examples/followers.html b/src/areas/relationships/examples/followers.html index 38276190..5a3ef2d8 100644 --- a/src/areas/relationships/examples/followers.html +++ b/src/areas/relationships/examples/followers.html @@ -5,8 +5,8 @@
-
-
+
+
-
+
-
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- +
-
+
diff --git a/src/areas/search/examples/search-results.html b/src/areas/search/examples/search-results.html index 5dcac27c..f6c767f3 100644 --- a/src/areas/search/examples/search-results.html +++ b/src/areas/search/examples/search-results.html @@ -5,8 +5,8 @@
-
-
+
+
+
-
-
-
-
- - - -
-

Panel from Barbarella by Jean-Claude Forest

-
-
-
-
- Panel from Barbarella by Jean-Claude Forest +
-
-
+ +
-
-
-
- - - -
-

Miss Piggy And Kermit in Roger Vadim’s "Barbarella"

-
-
-
-
- Miss Piggy And Kermit in Roger Vadim’s "Barbarella" -
-
-
-
Bruce McCorkindale
+ + +
  • +
    +
    +
    + + +
    -
    -
    +
    +
    + Miss Piggy And Kermit in Roger Vadim’s "Barbarella" +
    +
    Bruce McCorkindale
    +
    +
    +
    +
    + -
    -
    -
    +
    +
    + + + + + +
      +
    • 434 Views
      • +
    • + 1 +
      • + +
    • 0
      • +
    +
    -
    - - - - - -
      -
    • 434 Views
      • -
    • - 1 -
      • - -
    • 0
      • -
    -
    - -
    -
    -
    • - -
    -
    - - - -
    -

    Electric Barbarella (Myka Dunkle)

    -
    -
    -
    -
    - Electric Barbarella (Myka Dunkle)
    -
    -
    + + +
  • + +
    • + +
    +
    + « Older
    +
    -
    +
    diff --git a/src/areas/settings/examples/settings-connections.html b/src/areas/settings/examples/settings-connections.html index 387d69de..70f90ce8 100644 --- a/src/areas/settings/examples/settings-connections.html +++ b/src/areas/settings/examples/settings-connections.html @@ -5,10 +5,10 @@
    -
    -
    +
    +

    Your Settings

    -
    +
    -
    + +

    You’ve allowed the following applications access to your account @@ -51,6 +51,6 @@

    -
    +
    diff --git a/src/areas/settings/examples/settings-profile.html b/src/areas/settings/examples/settings-profile.html index 435f5252..fdd02793 100644 --- a/src/areas/settings/examples/settings-profile.html +++ b/src/areas/settings/examples/settings-profile.html @@ -5,10 +5,10 @@
    -
    -
    +
    +

    Your Settings

    -
    +
    -
    + +
    @@ -95,6 +95,6 @@

    Tips for your profile image:

    -
    +
    diff --git a/src/areas/settings/examples/settings.html b/src/areas/settings/examples/settings.html index cd5c6985..f425d5b4 100644 --- a/src/areas/settings/examples/settings.html +++ b/src/areas/settings/examples/settings.html @@ -5,17 +5,17 @@
    -
    -
    +
    +

    Your Settings

    -
    +
    -
    + +
    @@ -131,6 +131,6 @@

    Your Membership Plan: Single Scoop

    -
    +
    diff --git a/src/areas/shake/examples/shake.html b/src/areas/shake/examples/shake.html index 692e093d..8a475a5b 100644 --- a/src/areas/shake/examples/shake.html +++ b/src/areas/shake/examples/shake.html @@ -5,8 +5,8 @@
    -
    -
    +
    +
    -
    +
    -
    -
    -
    - - - -
    -

    Fremen

    -
    -
    -
    -
    - Fremen -
    -
    -
    -
    Moebius concept art for Dune
    -
    -
    - -
    - originally - posted by - - - - stereoplex -
    -
    - - - - - -
      -
    • 5 Views
      • -
    • - 0 -
      • - -
    • 0
      • -
    -
    - -
    -
    -
    -
    -

    dune 1984 bts

    -
    + +
  • +
    - -
    +
    +

    dune 1984 bts

    +
    + - or - Cancel -
    - -
    • -
    -
    - dune 1984 bts -
    -
    -
    -
    +
    + + or + Cancel +
    + +
    +
    + dune 1984 bts +
    +
    source: dune 1984 bts
    +
    + - Save - ▼
    - -
    -
    -
    -
    - - - - - -
      -
    • 544 Views
      • -
    • - 3 -
      • - -
    • 1
    -
    -
    -
    - - - -
    -
    -
    - jessamyn - - pro - - - - - Reply -
    - Delete -
    -
    - Always up for some more good backgrounds -
    -
    -
    -
    -
    - -
    - -
    -
    -
    -
    -
    -
    -
    -
    + + + diff --git a/src/components/images/examples/comments.html b/src/components/images/examples/comments.html index 35e1b1cc..2870d7a3 100644 --- a/src/components/images/examples/comments.html +++ b/src/components/images/examples/comments.html @@ -1,40 +1,37 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    +
      +
    • +
      +
      +
      + + + +
      +
      + +
      +

      Star Wars Zoom Backgrounds

      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      Star Wars is jumping on the Zoom background train. I’m looking forward to showing how clean I’ve kept my office with this one.

      You can find more at @@ -47,132 +44,134 @@

      Star Wars Zoom Backgrounds

      >
      -
      - - - + +
      +
      + - Unlike This - - +
        +
      • 544 Views
        • +
      • + 3 +
        • + +
      • + 1 +
        • +
      +
    -
    -
    - -
    -
    -
    -
    - - - - - -
      -
    • 544 Views
      • -
    • - 3 +
      +
      + + jessamyn + + pro + + + + + + Reply +
      + Delete +
      +
      + Always up for some more good backgrounds +
      +
      +
      • -
    • +
      + +
      + +
      +
      • -
    • 1
    -
    -
    -
    - - - -
    -
    -
    - jessamyn - - pro - - - - - Reply -
    - Delete -
    -
    - Always up for some more good backgrounds -
    -
    -
    -
    -
    - -
    - -
    -
    -
    -
    -
    -
    -
    -
    + + + diff --git a/src/components/images/examples/editable.html b/src/components/images/examples/editable.html index c919bffa..4fa8c0af 100644 --- a/src/components/images/examples/editable.html +++ b/src/components/images/examples/editable.html @@ -1,127 +1,174 @@ -
    -
    -

    Star Wars Zoom Backgrounds

    -
    - -
    - - or - Cancel -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    add some alt text
    -
    -
    -
    +
      +
    • +
      +
      +

      Star Wars Zoom Backgrounds

      +
      +
      + +
      + + or + Cancel +
      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      + add some alt text +
      +
      click here to edit description
      -
      - -
      - - or - Cancel -
      -
      -
      - - - - - -
        -
      • 544 Views
        • -
      • - 3 -
        • - -
      • 1
        • -
      -
      -
      -
      -
      - - - -
      -
      -
      - jessamyn - - pro - - - +
      +
      + -
      - Always up for some more good backgrounds +
      +
      + +
      +
      + +
        +
      • 544 Views
        • +
      • + 3 +
        • + +
      • + 1 +
        • +
      +
      -
      -
      - -
      - -
      -
      -
      +
        +
      • + +
        • +
      • +
        + +
        + +
        +
        +
        • +
      -
      -
      -
      -
      +
      +
      • +
    diff --git a/src/components/images/examples/editing.html b/src/components/images/examples/editing.html index f84cd980..5715bdb2 100644 --- a/src/components/images/examples/editing.html +++ b/src/components/images/examples/editing.html @@ -1,49 +1,55 @@ -
    -
    - -
    - -
    - - or - Cancel -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    alt text
    -
    add some alt text
    +
      +
    • +
      +
      +

      Star Wars Zoom Backgrounds

      +
      +
      + +
      + + or + Cancel +
      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      + add some alt text +
      +

      Edit alt text

      -

      Edit alt text

      Alt text describes images for blind and low-vision users, and helps - give context to everyone. Learn more. + give context to everyone. + Learn more.

      -
      - -
      -
      -
      +
        +
      • + +
        • +
      • +
        + +
        + +
        +
        +
        • +
    -
    -
    -
    -
    + + + diff --git a/src/components/images/examples/lengthy.html b/src/components/images/examples/lengthy.html index acf8ced7..2f79be19 100644 --- a/src/components/images/examples/lengthy.html +++ b/src/components/images/examples/lengthy.html @@ -1,29 +1,37 @@ -
    -
    -
    - - - -
    -

    Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch

    -
    -
    -
    - Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch -
    -
    -
    -
    +
      +
    • +
      +
      +
      + + + +
      +
      + +
      +

      + Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch +

      +
      +
      + Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch +
      source: Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch >
      -
      -
      - - - - - -
        -
      • 156 Views
        • -
      • 0
        • - -
      • 3
        • -
      -
      -
      -
      -
      - - - -
      -
      -
      - spaceninja +
      +
      +
      -
      - source: - https://en.wikipedia.org/w... + +
      +
      -
      -
      -
      -
      - - - +
      + + Save + ▼ +
      + +
      -
      -
      - tonyb - - pro - - +
      + + - - Reply -
      - Delete -
      -
      Give kindly to Vowels for Wales
      -
      -
      -
      -
      - - - -
      -
      -
      - jessamyn - - pro - - - - Reply -
      - Delete -
      -
      - This SHK breaks admin stuff, ye monster! -
      + +
        +
      • 156 Views
        • +
      • 0
        • + +
      • 3
        • +
      -
      -
      - -
      - -
      -
      -
      +
        +
      • +
        +
        + + + +
        +
        +
        + spaceninja + + pro + + + + + Reply +
        + Delete +
        +
        + source: + https://en.wikipedia.org/w... +
        +
        Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch +
        +
        Llanfairpwllgwyngyll or Llanfair Pwllgwyngyll + (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]) is a large village and + community on the island of Anglesey in Wales, situated on the + Menai Strait next to the Britannia Bridge and across the + strait from Bangor. It is alternatively known as Llanfairpwll, + Llanfair PG, or + Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch. +
        +
        At the 2001 census, the population of the community was + 3,040,[1] 76% of whom spoke Welsh fluently; the highest + percentage of speakers were in the 10–14 age group, where + 97.1% spoke Welsh.[citation needed] By the time of the 2011 + Census the population had increased to 3,107, of whom 70.62% + were able to speak Welsh.[2] It is the sixth largest + settlement on the island by population.
        +
        The long form of the name was invented for promotional + purposes in the 1860s; with 58 characters it is the longest + place name in Europe and the second longest official one-word + place name in the world.[3] +
        +
        +
        +
        • +
      • + +
        • +
      • + +
        • +
      • +
        + +
        + +
        +
        +
        • +
      -
      -
      -
      -
      +
      +
      • +
    diff --git a/src/components/images/examples/likes.html b/src/components/images/examples/likes.html index 257a9e8a..c81a2f9f 100644 --- a/src/components/images/examples/likes.html +++ b/src/components/images/examples/likes.html @@ -1,40 +1,37 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    +
      +
    • +
      +
      +
      + + + +
      +
      + +
      +

      Star Wars Zoom Backgrounds

      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      Star Wars is jumping on the Zoom background train. I’m looking forward to showing how clean I’ve kept my office with this one.

      You can find more at @@ -47,237 +44,259 @@

      Star Wars Zoom Backgrounds

      >
      -
      - +
      +
      + +
      +
      +
      +
      + - Unlike This - - +
        +
      • 544 Views
        • +
      • + 3 +
        • + +
      • + 1 +
        • +
      +
    -
    -
    - -
    -
    -
    -
    - - - - - -
      -
    • 544 Views
      • -
    • - 3 -
      • - -
    • 1
      • -
    -
    -
    -
    - tonybsnowbowme3diaurlnotfoundcolintheriotsassquatchjazonSailormomLord_John_WhorfinbajxyznintervalometerdavidlLockjawrandomfishVidiotinfinicaitlinburkemcmjolnirmccreathspaceninjaj2323 +
    -
    -
    -
    -
    + + + diff --git a/src/components/images/examples/list-liked-saved.html b/src/components/images/examples/list-liked-saved.html index 94f28651..cec10f48 100644 --- a/src/components/images/examples/list-liked-saved.html +++ b/src/components/images/examples/list-liked-saved.html @@ -1,40 +1,37 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    +
      +
    • +
      +
      +
      + + + +
      +
      + +
      +

      Star Wars Zoom Backgrounds

      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      Star Wars is jumping on the Zoom background train. I’m looking forward to showing how clean I’ve kept my office with this one.

      You can find more at @@ -47,118 +44,129 @@

      Star Wars Zoom Backgrounds

      >
      -
      - -
      - Saved -
      -
      -
      - - - - - -
        -
      • 544 Views
        • -
      • - 3 -
        • - -
      • 1
        • -
      -
      -
      -
      -
      - - - -
      -
      -
      - jessamyn - - pro - - - +
      +
      + -
      - Always up for some more good backgrounds +
      + Saved
      +
      + +
        +
      • 544 Views
        • +
      • + 3 +
        • + +
      • + 1 +
        • +
      +
      -
      -
      - -
      - -
      -
      -
      +
        +
      • + +
        • +
      • +
        + +
        + +
        +
        +
        • +
      -
      -
      -
      -
      +
      +
      • +
    diff --git a/src/components/images/examples/list-save-shake.html b/src/components/images/examples/list-save-shake.html index d32ee684..e282584b 100644 --- a/src/components/images/examples/list-save-shake.html +++ b/src/components/images/examples/list-save-shake.html @@ -1,40 +1,37 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    +
    -
    + + + diff --git a/src/components/images/examples/list.html b/src/components/images/examples/list.html index 0843449e..b8d1648f 100644 --- a/src/components/images/examples/list.html +++ b/src/components/images/examples/list.html @@ -1,40 +1,37 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    +
      +
    • +
      +
      +
      + + + +
      +
      + +
      +

      Star Wars Zoom Backgrounds

      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      Star Wars is jumping on the Zoom background train. I’m looking forward to showing how clean I’ve kept my office with this one.

      You can find more at @@ -47,130 +44,75 @@

      Star Wars Zoom Backgrounds

      >
      -
      - -
      -
      - +
      - - -
      -
    -
    - - - - - -
      -
    • 544 Views
      • -
    • - 3 -
      • - -
    • 1
      • -
    -
    - -
    -
    + + + diff --git a/src/components/images/examples/no-comments.html b/src/components/images/examples/no-comments.html deleted file mode 100644 index 8a89af99..00000000 --- a/src/components/images/examples/no-comments.html +++ /dev/null @@ -1,125 +0,0 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    - Star Wars is jumping on the Zoom background train. I’m looking forward - to showing how clean I’ve kept my office with this one.

    You - can find more at - https://www.starwars.com/news... -
    -
    -
    - -
    -
    - -
    -
    -
    -
    - - - - - -
      -
    • 119 Views
      • -
    • - 0 -
      • - -
    • 0
      • -
    -
    - -
    -
    -
    -
    diff --git a/src/components/images/examples/nsfw.html b/src/components/images/examples/nsfw.html index b5951747..c603dea8 100644 --- a/src/components/images/examples/nsfw.html +++ b/src/components/images/examples/nsfw.html @@ -1,419 +1,465 @@ -
    -
    -
    - - - -
    -

    Facebook 18+ Edition

    -
    -
    -
    -
    -
    -

    This may not be safe for viewing at work.

    -

    Click here to view

    -
    -
    -
    -
    -
    - -
    - Saved -
    -
    -
    - - - + diff --git a/src/components/images/examples/permalink.html b/src/components/images/examples/permalink.html index cbb102b9..080d6170 100644 --- a/src/components/images/examples/permalink.html +++ b/src/components/images/examples/permalink.html @@ -1,37 +1,34 @@
    -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    alt text
    +
    +
    +

    Star Wars Zoom Backgrounds

    +
    +
    +
    + Star Wars Zoom Backgrounds
    -
    -
    - Star Wars is jumping on the Zoom background train. I’m looking forward - to showing how clean I’ve kept my office with this one.

    You - can find more at - https://www.starwars.com/news... -
    +
    alt text
    +
    + Star Wars is jumping on the Zoom background train. I’m looking forward + to showing how clean I’ve kept my office with this one.

    You + can find more at + https://www.starwars.com/news...
    -
    - +
    +
    +
    + -
    -
    -
    +
    +
    + + + + + +
    -
    - - - - - -
    -
    -
    +
    diff --git a/src/components/images/examples/repost.html b/src/components/images/examples/repost.html index ea452c92..df2111f8 100644 --- a/src/components/images/examples/repost.html +++ b/src/components/images/examples/repost.html @@ -1,40 +1,37 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    +
      +
    • +
      +
      +
      + + + +
      +
      + +
      +

      Star Wars Zoom Backgrounds

      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      Star Wars is jumping on the Zoom background train. I’m looking forward to showing how clean I’ve kept my office with this one.

      You can find more at @@ -46,146 +43,149 @@

      Star Wars Zoom Backgrounds

      >https://www.starwars.com/news...
      +
      + originally + posted by + + + + O_C +
      -
      - - - + +
      +
      + - Unlike This - - +
        +
      • 544 Views
        • +
      • + 3 +
        • + +
      • + 1 +
        • +
      +
    -
    -
    - -
    -
    -
    -
    - originally - posted by - - - - O_C -
    -
    - - - - - -
      -
    • 544 Views
      • -
    • - 3 +
      +
      + jessamyn + + pro + + + + + Reply +
      + Delete +
      +
      + Always up for some more good backgrounds +
      +
      +
      • -
    • +
      + +
      + +
      +
      • -
    • 1
    -
    -
    -
    - - - -
    -
    -
    - jessamyn - - pro - - - - - Reply -
    -
    - Always up for some more good backgrounds -
    -
    -
    -
    -
    - -
    - -
    -
    -
    -
    -
    -
    -
    -
    + + + diff --git a/src/components/images/examples/saves.html b/src/components/images/examples/saves.html index 38542bce..822fb42d 100644 --- a/src/components/images/examples/saves.html +++ b/src/components/images/examples/saves.html @@ -1,40 +1,37 @@ -
    -
    -
    - - - -
    -

    Star Wars Zoom Backgrounds

    -
    -
    -
    - -
    -
    -
    -
    -
    - Star Wars Zoom Backgrounds -
    -
    -
    -
    +
      +
    • +
      +
      +
      + + + +
      +
      + +
      +

      Star Wars Zoom Backgrounds

      +
      +
      +
      + Star Wars Zoom Backgrounds +
      +
      Star Wars is jumping on the Zoom background train. I’m looking forward to showing how clean I’ve kept my office with this one.

      You can find more at @@ -47,104 +44,103 @@

      Star Wars Zoom Backgrounds

      >
      -
      - - - - -
      -
      -
      -
      + +
      +
      + -
      - - Save - ▼ -
      - - +
        +
      • 544 Views
        • +
      • + 3 +
        • + +
      • + 1 +
        • +
      +
    -
    -
    - - - - - -
      -
    • 544 Views
      • -
    • - 3 -
      • - -
    • 1
      • -
    -
    -
    -
    - mltshpVidiotspaceninja +
    +
    -
    -
    -
    -
    + + + diff --git a/src/components/images/partials/_image-alt-text.scss b/src/components/images/partials/_image-alt-text.scss index 91a6e994..d28b40f6 100644 --- a/src/components/images/partials/_image-alt-text.scss +++ b/src/components/images/partials/_image-alt-text.scss @@ -1,83 +1,85 @@ @use '../../../base/links'; @use '../../../init/mixins'; -.image-content { - .alt-text { - color: var(--color-page-text); - font-size: 0.875rem; - overflow: hidden; - padding-bottom: var(--size-spacing-default); - - .the-alt-text { - @include mixins.breakword; - background: var(--color-background-content-secondary); - color: var(--color-page-text-secondary); - margin-top: var(--size-spacing-half); - padding: var(--size-spacing-default) var(--size-spacing-half-again); - - &:focus { - box-shadow: none; - } - } - - &.alt-text--blank .the-alt-text { - color: var(--color-status-disabled); - font-style: italic; - } - - &.alt-text--blank .alt-text-toggle, - &.alt-text--editing .alt-text-toggle { - display: none; - } - - &.alt-text--hidden .the-alt-text, - &.alt-text--editing .the-alt-text { - display: none; - } - } +.post__alt-text { + background: var(--color-background-content-secondary); + color: var(--color-page-text-secondary); + font-size: 0.875rem; + overflow: hidden; + padding: var(--size-spacing-default) var(--size-spacing-half-again); + + @include mixins.breakword; - // Inline Editing Alt Text - // stylelint-disable a11y/selector-pseudo-class-focus - .alt-text-edit .the-alt-text:hover, - .the-alt-text-hover { - background-color: var(--color-status-edit); + &:focus { + box-shadow: none; } - // stylelint-enable a11y/selector-pseudo-class-focus - .alt-text--editing .alt-text-edit-form { - display: block; + &.alt-text--blank .alt-text-toggle, + &.alt-text--editing .alt-text-toggle { + display: none; } - .alt-text-edit-form { + &.alt-text--hidden .the-alt-text, + &.alt-text--editing .the-alt-text { display: none; + } +} + +// Inline Editing Alt Text +.post__alt-text--editable:hover, +.post__alt-text--editable:focus { + background-color: var(--color-status-edit); +} + +.post__alt-text--blank { + color: var(--color-status-disabled); + font-style: italic; +} + +.post__alt-text-toggle { + cursor: pointer; +} - .alt-text-learn { - margin-top: 5px; - } - - textarea { - background-color: var(--color-background-content); - border: 1px solid var(--color-border-default); - border-radius: var(--size-border-radius-default); - color: var(--color-page-text); - min-height: 100px; - padding: var(--size-spacing-half); - } - - .buttons { - display: flex; - padding: var(--size-spacing-default) 0; - } - - .or { - color: var(--color-page-text-secondary); - display: block; - padding: var(--size-spacing-half) var(--size-spacing-default) - var(--size-spacing-half-again) var(--size-spacing-default); - } +.post__alt-text-editor { + display: none; + + .alt-text-learn { + margin: 0; + } + + textarea { + background-color: var(--color-background-content); + border: 1px solid var(--color-border-default); + border-radius: var(--size-border-radius-default); + color: var(--color-page-text); + min-height: 100px; + padding: var(--size-spacing-half); + } + + .buttons { + display: flex; + gap: var(--size-spacing-half); } - .alt-text-toggle { - cursor: pointer; + .or { + color: var(--color-page-text-secondary); + } +} + +.post__alt-text--editing .post__alt-text-editor { + // Show the editor if we are edit-ing. + display: block; +} + +.post__alt-text--editing { + // Hide the alt-text ... + display: none; + + // ... and display the editor. + + .post__alt-text-editor { + display: flex; + flex-direction: column; + gap: var(--size-spacing-default); + margin-bottom: var(--size-spacing-triple); } } diff --git a/src/components/images/partials/_image-comments.scss b/src/components/images/partials/_image-comments.scss index 2cd5530f..84e38819 100644 --- a/src/components/images/partials/_image-comments.scss +++ b/src/components/images/partials/_image-comments.scss @@ -1,136 +1,175 @@ @use '../../../base/links'; @use '../../../init/mixins'; -.image-content { - .inline-details { - background-color: var(--color-background-content-secondary); - border-radius: var(--size-border-radius-default); - clear: both; - min-height: 34px; // magic number +.image-content-list .post__saves, +.image-content-list .post__likes, +.image-content-list .post__comments { + background-color: var(--color-background-content-secondary); + border-radius: var(--size-border-radius-default); + min-height: 34px; // magic number + padding: var(--size-spacing-default); + + .show-more-comments { + display: block; + font-size: 0.75rem; + font-weight: var(--number-font-weight-bold); + padding: var(--size-spacing-default) 0; + text-align: right; + text-decoration: none; + } + + .comment { padding: var(--size-spacing-default); + } +} - .user-saves-likes { - background-color: var(--color-background-content); - min-height: var(--size-avatar-tiny); - padding: var(--size-spacing-default); - - a { - @include links.link-primary; - @include links.link-emphasized; - align-items: center; - display: inline-flex; - margin-right: var(--size-spacing-default); - } - - img { - margin-right: var(--size-spacing-half); - } - - .avatar--img { - height: var(--size-avatar-tiny); - width: var(--size-avatar-tiny); - } - } +.post__saves, +.post__likes { + // Need an extra div around the ul to fill out the background. + background-color: var(--color-background-content-secondary); + + ul { + background-color: var(--color-background-content); + display: flex; + flex-wrap: wrap; + gap: var(--size-spacing-default); + list-style: none; + margin: 0; + padding: var(--size-spacing-default); + } +} + +.post__footer .save, +.post__footer .like { + align-items: center; + background-color: var(--color-background-content); + display: inline-flex; + gap: var(--size-spacing-half); + min-height: var(--size-avatar-tiny); + padding: 0; + row-gap: var(--size-spacing-quarter); + + @include links.link-primary; + @include links.link-emphasized; +} + +.save__avatar, +.like__avatar { + height: var(--size-avatar-tiny); + width: var(--size-avatar-tiny); +} + +.comments, +.post__comments { + list-style: none; + margin: 0; + padding: 0; + + > li:not(:last-child) { + margin-bottom: var(--size-spacing-default); + } +} + +.like__avatar { + height: var(--size-avatar-tiny); + width: var(--size-avatar-tiny); +} + +// By itself a comment is kept pretty basic, without extra padding or +// expectation of a contrasting colour being set by the container. +.comment { + background-color: var(--color-background-content); + border-radius: var(--size-border-radius-default); + display: flex; + gap: var(--size-spacing-default); + + .delete-form { + display: none; + } + + // reply-to and delete controls defined further up the tree to enable + // reuse. +} + +.comment__avatar { + flex: none; - .comment { - background-color: var(--color-background-content); - border-radius: var(--size-border-radius-default); - display: flex; - margin-bottom: var(--size-spacing-default); - padding: var(--size-spacing-default); - - .avatar { - flex: none; - - a { - display: block; - } - } - - .avatar--img { - height: var(--size-avatar-small); - width: var(--size-avatar-small); - } - - .comment-body { - flex: 1; - overflow: hidden; - padding-left: var(--size-spacing-default); - } - - .comment-body-text { - @include mixins.breakword; - clear: both; - color: var(--color-page-text); - } - - .meta { - align-items: flex-end; - display: flex; - flex-wrap: wrap; - font-size: 0.75rem; - margin-bottom: 0.4rem; - - > * + * { - margin-left: 0.8em; - } - } - - .delete-form { - display: none; - } - - .meta .username { - font-weight: var(--number-font-weight-bold); - } - - .meta .pro-badge { - margin-left: 0.25em; - } - - .created-at { - margin-left: var(--size-spacing-default); - padding-top: 0; - } - - // reply-to and delete controls defined further up the tree to enable - // reuse. + a { + display: block; + } + + img { + height: var(--size-avatar-default); + width: var(--size-avatar-default); + } +} + +.post__comments { + .comment__avatar { + img { + height: var(--size-avatar-small); + width: var(--size-avatar-small); } + } +} - .show-more-comments { - display: block; - font-size: 0.75rem; - font-weight: var(--number-font-weight-bold); - padding: var(--size-spacing-default) 0; - text-align: right; - text-decoration: none; +.comment__body { + display: flex; + flex-direction: column; + gap: var(--size-spacing-default); +} + +.comment__meta { + align-items: flex-end; + display: flex; + flex-wrap: wrap; + font-size: 0.75rem; + gap: var(--size-spacing-default); + + .username, + .user-name { + font-size: 0.875rem; + font-weight: var(--number-font-weight-bold); + } + + .created-at { + color: var(--color-page-text-secondary); + padding-top: 0; // override .post__footer .created-at + } +} + +.comment__text { + @include mixins.breakword; + clear: both; + color: var(--color-page-text); +} + +.post__new-comment-form { + display: flex; + flex-direction: column; + gap: var(--size-spacing-default); + + textarea { + background-color: var(--color-background-content); + border: 1px solid var(--color-border-default); + border-radius: var(--size-border-radius-default); + color: var(--color-page-text-disabled); + height: 2em; + padding: var(--size-spacing-half); + } + + .button { + display: none; + } + + &--expanded { + textarea { + color: var(--color-page-text); + min-height: 100px; } - .post-comment-inline { - textarea { - background-color: var(--color-background-content); - border: 1px solid var(--color-border-default); - border-radius: var(--size-border-radius-default); - color: var(--color-page-text-disabled); - height: 2em; - padding: var(--size-spacing-half); - } - - .button { - display: none; - padding-top: var(--size-spacing-half); - } - - &.post-comment-inline-expanded { - textarea { - color: var(--color-page-text); - min-height: 100px; - } - - .button { - display: block; - } - } + .button { + display: block; } } } diff --git a/src/components/images/partials/_image-content.scss b/src/components/images/partials/_image-content.scss index 35a2e837..dc0f6193 100644 --- a/src/components/images/partials/_image-content.scss +++ b/src/components/images/partials/_image-content.scss @@ -1,16 +1,13 @@ @use '../../../compiled/scss/tokens'; -.image-content { +.post__content { clear: both; + display: flex; + flex-direction: column; + gap: var(--size-spacing-default); max-width: 100%; - padding: var(--size-spacing-half-again); position: relative; - @media screen and (min-width: tokens.$size-breakpoint-lg) { - padding: var(--size-spacing-half-again) var(--size-spacing-quadruple) - var(--size-spacing-quadruple); - } - .the-image { a, img { @@ -23,15 +20,12 @@ height: auto; max-width: 100%; } +} - // list overrides - .image-content-list & { - border-bottom: 1px dashed var(--color-border-default); - float: none; - padding: 0 var(--size-spacing-half-again) var(--size-spacing-half-again); - - @media screen and (min-width: tokens.$size-breakpoint-lg) { - padding: 0 var(--size-spacing-quadruple) var(--size-spacing-quadruple); - } - } +// If neither description, alt-text, or originally-by present add a little extra +// margin below the content. Otherwise looks too tight before the post meta. +.post__content:not( + :has(.post__alt-text, .post__description, .post__originally-by) +) { + margin-bottom: var(--size-spacing-default); } diff --git a/src/components/images/partials/_image-description.scss b/src/components/images/partials/_image-description.scss index c477c88d..97e4deda 100644 --- a/src/components/images/partials/_image-description.scss +++ b/src/components/images/partials/_image-description.scss @@ -1,59 +1,58 @@ @use '../../../base/links'; @use '../../../init/mixins'; -.image-content { - .description { - color: var(--color-page-text); - overflow: hidden; - padding-bottom: var(--size-spacing-default); +.post__description { + color: var(--color-page-text); + overflow: hidden; + + @include mixins.breakword; + + a { + @include links.link-primary; } +} + +.post__description--blank { + color: var(--color-status-disabled); + font-style: italic; +} - .the-description { - @include mixins.breakword; +.post__description--editable:hover, +.post__description--editable:focus { + background-color: var(--color-status-edit); +} + +.post__description-editor { + display: none; - &.the-description-blank { - color: var(--color-status-disabled); - font-style: italic; - } + textarea { + background-color: var(--color-background-content); + border: 1px solid var(--color-border-default); + border-radius: var(--size-border-radius-default); + color: var(--color-page-text); + min-height: 100px; + padding: var(--size-spacing-half); + } - a { - @include links.link-primary; - } + .buttons { + display: flex; + gap: var(--size-spacing-half); } - // Inline Editing Description - .description-edit .the-description:hover, - .description-edit .the-description:focus, - .the-description-hover { - background-color: var(--color-status-edit); + .or { + color: var(--color-page-text-secondary); } +} + +.post__description--editing { + // Hide the description ... + display: none; - .description-edit-form { - display: none; - - h3 { - margin-bottom: 5px; - } - - textarea { - background-color: var(--color-background-content); - border: 1px solid var(--color-border-default); - border-radius: var(--size-border-radius-default); - color: var(--color-page-text); - min-height: 100px; - padding: var(--size-spacing-half); - } - - .buttons { - display: flex; - padding: var(--size-spacing-default) 0; - } - - .or { - color: var(--color-page-text-secondary); - display: block; - padding: var(--size-spacing-half) var(--size-spacing-default) - var(--size-spacing-half-again) var(--size-spacing-default); - } + // ... and display the editor. + + .post__description-editor { + display: flex; + flex-direction: column; + gap: var(--size-spacing-default); + margin-bottom: var(--size-spacing-triple); } } diff --git a/src/components/images/partials/_image-footer.scss b/src/components/images/partials/_image-footer.scss index 9aa08ca9..4ace9e6f 100644 --- a/src/components/images/partials/_image-footer.scss +++ b/src/components/images/partials/_image-footer.scss @@ -1,31 +1,28 @@ -.image-content-footer { - color: var(--color-page-text-secondary); - padding-top: var(--size-spacing-default); - - .originally-posted-by { - clear: left; - padding-bottom: var(--size-spacing-half); - - .avatar--link { - display: inline-block; - text-decoration: none; - vertical-align: middle; - } +.post__originally-by { + .avatar--link { + display: inline-block; + text-decoration: none; + vertical-align: middle; + } - .avatar--img { - height: var(--size-avatar-tiny); - width: var(--size-avatar-tiny); - } + .avatar--img { + height: var(--size-avatar-tiny); + width: var(--size-avatar-tiny); } +} - .inline-meta { +.post__footer { + color: var(--color-page-text-secondary); + display: flex; + flex-direction: column; + + .image-meta-interactions { display: flex; - float: left; - font-size: 0.75rem; - > * { - flex: none; - } + // 1. Wrap interactions above inline meta on narrow screens + // 2. Leave a gap between interactions and inline-meta when wrapped + flex-wrap: wrap-reverse; // 1 + row-gap: var(--size-spacing-half); // 2 } .save-this-shake-selector { @@ -46,58 +43,4 @@ } } } - - .stats { - list-style: none; - margin: 0 0 0 var(--size-spacing-default); - padding: 0; - - li { - float: left; - padding-right: var(--size-spacing-half); - } - - a { - background-position: var(--size-spacing-half) 0.5em; - background-repeat: no-repeat; - background-size: 1em 1em; - border-top-left-radius: var(--size-border-radius-default); - border-top-right-radius: var(--size-border-radius-default); - display: block; - float: left; - padding: var(--size-spacing-half); - padding-bottom: var(--size-spacing-default); - padding-left: calc(var(--size-spacing-default) + 1em); - text-decoration: none; - - &:hover, - &:focus { - background-color: var(--color-background-content-secondary); - } - } - - .views { - padding-top: var(--size-spacing-half); - } - - .saves a { - background-image: svg-load('icons/save-tiny.svg'); - background-size: 1.33em 1em; - color: var(--color-status-warning); - padding-left: calc(var(--size-spacing-default) + 1.33em); - } - - .likes a { - background-image: svg-load('icons/like.svg'); - color: var(--color-status-danger); - } - - .comments a { - background-image: svg-load('icons/comment.svg'); - } - - .selected a { - background-color: var(--color-background-content-secondary); - } - } } diff --git a/src/components/images/partials/_image-interactions.scss b/src/components/images/partials/_image-interactions.scss index c83926c1..ffb26281 100644 --- a/src/components/images/partials/_image-interactions.scss +++ b/src/components/images/partials/_image-interactions.scss @@ -1,9 +1,77 @@ -.image-interactions { - align-items: center; +.post__meta-interactions { + // Wrapper for meta and interaction components to allow flex wrapping and reordering on narrow screens. + display: flex; + flex-wrap: wrap-reverse; // Wrap interactions above inline meta on narrow screens + gap: var(--size-spacing-half) var(--size-spacing-default); // Leave a gap between interactions and inline-meta when wrapped +} + +.post__meta { + display: flex; + float: left; + font-size: 0.75rem; + gap: var(--size-spacing-default); + + > * { + flex: none; + } +} + +.post__meta-stats { + display: flex; + gap: var(--size-spacing-half); + list-style: none; + margin: 0; + padding: 0; + + a { + background-position: var(--size-spacing-half) 0.5em; + background-repeat: no-repeat; + background-size: 1em 1em; + border-top-left-radius: var(--size-border-radius-default); + border-top-right-radius: var(--size-border-radius-default); + display: block; + float: left; + padding: var(--size-spacing-half); + padding-bottom: var(--size-spacing-default); + padding-left: calc(var(--size-spacing-default) + 1em); + text-decoration: none; + + &:hover, + &:focus { + background-color: var(--color-background-content-secondary); + } + } + + .views { + padding-top: var(--size-spacing-half); + } + + .saves a { + background-image: svg-load('icons/save-tiny.svg'); + background-size: 1.33em 1em; + color: var(--color-status-warning); + padding-left: calc(var(--size-spacing-default) + 1.33em); + } + + .likes a { + background-image: svg-load('icons/like.svg'); + color: var(--color-status-danger); + } + + .comments a { + background-image: svg-load('icons/comment.svg'); + } + + .selected a { + background-color: var(--color-background-content-secondary); + } +} + +.post__interactions { display: flex; flex-direction: row-reverse; - float: right; - margin-bottom: 4px; // magic number to prevent layout gap below .inline-meta + margin-left: auto; // Push right when wrapped + order: 2; // Show after inline meta when not wrapped .save-this { margin-right: var(--size-spacing-half); diff --git a/src/components/images/partials/_image-title.scss b/src/components/images/partials/_image-title.scss index 4704fbb5..0f34ecf8 100644 --- a/src/components/images/partials/_image-title.scss +++ b/src/components/images/partials/_image-title.scss @@ -2,15 +2,10 @@ @use '../../../init/mixins'; @use '../../buttons/buttons'; -.image-title { +.post__title { max-width: 100%; - padding: var(--size-spacing-half-again) var(--size-spacing-half-again) 0; position: relative; - @media screen and (min-width: tokens.$size-breakpoint-lg) { - padding: var(--size-spacing-quadruple) var(--size-spacing-quadruple) 0; - } - .image-poster { float: left; padding-right: var(--size-spacing-default); @@ -31,31 +26,21 @@ h3 { font-size: 1.875rem; - margin-bottom: var(--size-spacing-double); } .remove-from-shake { + float: right; height: 21px; - position: absolute; - right: var(--size-spacing-default); - top: var(--size-spacing-default); width: 21px; - - @media screen and (min-width: tokens.$size-breakpoint-lg) { - top: calc( - var(--size-spacing-quadruple) + var(--size-spacing-half) - ); // padding + 5px - } } -} -.image-edit-title:hover, -.image-edit-title:focus, -.image-edit-title-hover { - background-color: var(--color-status-edit); + &--editable:hover, + &--editable:focus { + background-color: var(--color-status-edit); + } } -.image-edit-title-form { +.post__title-editor { display: none; flex-direction: column; @@ -73,45 +58,36 @@ border-radius: var(--size-border-radius-default); color: var(--color-page-text); flex: 1; - font-size: 3rem; + font-size: 1.875rem; font-weight: var(--number-font-weight-bold); margin-bottom: var(--size-spacing-default); max-width: 100%; - min-width: 0; + min-width: 250px; + padding: 0.0666em; @media screen and (min-width: tokens.$size-breakpoint-md) { margin-bottom: 0; } - - .image-content-list & { - font-size: 1.875rem; - min-width: 250px; - padding: 0.0666em; - } } .buttons { align-items: center; display: flex; - padding-left: var(--size-spacing-default); + gap: var(--size-spacing-half); } .or { color: var(--color-page-text-secondary); - display: block; - padding: 0 var(--size-spacing-default); } +} - // - // List View Overrides - // 1. Spacing is handled differently on the permalink page - // 2. We only want the small button treatment on list pages - // - .image-content-list & { - margin-bottom: var(--size-spacing-double); // 1 +.post__title--editing { + // Hide the title ... + display: none; - .btn { - @include buttons.button-small; // 2 - } + // ... and display the editor. + + .post__title-editor { + display: flex; + gap: var(--size-spacing-default); } } diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss index 0af34c47..48df07d3 100644 --- a/src/components/pagination/_pagination.scss +++ b/src/components/pagination/_pagination.scss @@ -1,12 +1,10 @@ @use '../../compiled/scss/tokens'; .pagination { - background-color: var(--color-bg-secondary-brand-pastel); - border-radius: var(--size-border-radius-large); + // Add border between self and end of list above. + border-top: 1px dashed var(--color-border-default); font-size: 0.875rem; font-weight: var(--number-font-weight-bold); - margin: var(--size-spacing-quadruple); - padding: var(--size-spacing-default); a, .current { @@ -40,6 +38,13 @@ } } +.pagination-outer { + background-color: var(--color-bg-secondary-brand-pastel); + border-radius: var(--size-border-radius-large); + margin: var(--size-spacing-quadruple); + padding: var(--size-spacing-default); +} + .pagination-inner { align-items: center; background-color: var(--color-background-content); @@ -55,12 +60,23 @@ } .linear-navigation { + // Add border between self and end of list above. + border-top: 1px dashed var(--color-border-default); display: flex; - justify-content: space-between; - padding: var(--size-spacing-triple) var(--size-spacing-quadruple); + padding: var(--size-spacing-triple) var(--size-spacing-half-again); + + // Line up timeline nav buttons with rest of page content. + @media screen and (min-width: tokens.$size-breakpoint-lg) { + padding: var(--size-spacing-triple) var(--size-spacing-quadruple); + } + + // Push older and newer buttons to respective ends of their section on larger + // screens. + a.older { + margin-right: auto; + } - .newer a, - .older a { - display: block; + a.newer { + margin-left: auto; } } diff --git a/src/components/pagination/examples/default.html b/src/components/pagination/examples/default.html index 0178c040..03b3fac3 100644 --- a/src/components/pagination/examples/default.html +++ b/src/components/pagination/examples/default.html @@ -1,16 +1,18 @@ -