Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Add display text for external medium links #480

Merged
merged 1 commit into from
Apr 28, 2023
Merged

Add display text for external medium links #480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/assets/stylesheets/media.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,4 +328,8 @@

.tab-content > .active {
visibility: visible;
}

.break-text-any-where {
word-break: break-all;
}
1 change: 1 addition & 0 deletions app/controllers/media_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,6 +501,7 @@ def fill_reassign_modal
def medium_params
params.require(:medium).permit(:sort, :description, :video, :manuscript,
:external_reference_link,
:external_link_description,
:geogebra, :geogebra_app_name,
:teachable_type, :teachable_id,
:released, :text, :locale,
Expand Down
7 changes: 7 additions & 0 deletions app/helpers/media_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,4 +134,11 @@ def edit_or_show_medium_path(medium)
return edit_medium_path(medium) if current_user.can_edit?(medium)
medium_path(medium)
end

def external_link_description_not_empty(medium)
# Uses link display name if not empty, otherwise falls back to the
# link url itself.
return medium.external_link_description.empty?\
? medium.external_reference_link : medium.external_link_description
end
end
7 changes: 7 additions & 0 deletions app/views/media/_external_link.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,12 @@
<%= t('buttons.test') %>
</button>
</div>
<div class="col-12 mt-3 form-floating">
<%# TODO: Replace with floating label in Bootstrap5 %>
<%= f.label :external_link_description, t('basics.external_link_description') %>
<%= helpdesk(t('admin.medium.info.external_link_description'), false) %>
<%= f.text_field :external_link_description,
class: 'form-control' %>
</div>
</div>
</div>
5 changes: 3 additions & 2 deletions app/views/media/_external_link_card.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
</h5>
</div>
<div class="card-body text-center">
<%= link_to t('click_here'),
<%= link_to external_link_description_not_empty(medium),
medium.external_reference_link,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure if it is visually the most pleasing to have a very large button that visually dominates the whole page if the description text is quite long, but I also do not have an alternative idea. Mabye just plain the text and then a simple "Link"-Button?
button

Copy link
Member Author

@Splines Splines Apr 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought the display text was just intended for some short text, e.g. "LA Bosch". That's why the input field (to enter the display text) is also just a small field and not a whole expandable box. The word-break: break-all; is therefore just for the edge case, so that the button does not stick out of the outer div. (Note that edge case also means when the display text is empty, then we show the url itself).

While I don't think that this button is overly pretty for long texts, I also don't really like the option of a "Link" button next to the display text as I feel like links should show the thing they point to directly on them and not somewhere else.

class: "btn btn-info",
class: "btn btn-info break-text-any-where",
title: medium.external_reference_link,
target: :_blank %>
</div>
</div>
2 changes: 1 addition & 1 deletion app/views/media/medium/_buttons.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<i class="material-icons text-secondary"
data-toggle="tooltip"
data-placement="bottom"
title="<%= t('external_link_lc') %>">
title="<%= external_link_description_not_empty(medium) %>">
link
</i>
</a>
Expand Down
5 changes: 4 additions & 1 deletion config/locales/de.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1175,8 +1175,10 @@ de:
Informationen z.T. automatisch über die im THymE-editor hinterlegten
Daten ausgelesen werden können.
external_link: >
Externer Link, der einen Teil diese Mediums ausmacht.
Externer Link, der einen Teil dieses Mediums ausmacht.
Das könnte z.B. ein Link auf das Stacks-Project sein.
external_link_description: >
Anzeigetext für den Button, der zum externen Link führt.
access_rights: >
Die Varianten von Zugriffsrechten sind möglich:
<ul>
Expand Down Expand Up @@ -3181,6 +3183,7 @@ de:
related_media: 'Verknüpfte Medien'
related_questions: 'Verknüpfte Fragen'
external_link: 'Externer Link'
external_link_description: 'Anzeigetext'
editor: 'EditorIn'
thyme: 'THymE'
thyme_editor: 'Editor'
Expand Down
3 changes: 3 additions & 0 deletions config/locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1113,6 +1113,8 @@ en:
external_link: >
External link that constitutes a part of the medium. E.g., this might
be a link to the Stacks Project.
external_link_description: >
Display text for the button pointing to the external link.
access_rights: >
There are the following options:
<ul>
Expand Down Expand Up @@ -2999,6 +3001,7 @@ en:
related_media: 'Related media'
related_questions: 'Related questions'
external_link: 'External Link'
external_link_description: 'Display text'
editor: 'Editor'
thyme: 'THymE'
thyme_editor: 'Editor'
Expand Down
5 changes: 5 additions & 0 deletions db/migrate/20230427124337_add_external_reference_link_description_to_medium.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
class AddExternalReferenceLinkDescriptionToMedium < ActiveRecord::Migration[7.0]
def change
add_column :media, :external_link_description, :text
end
end
3 changes: 2 additions & 1 deletion db/schema.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
#
# It's strongly recommended that you check this file into your version control system.

ActiveRecord::Schema[7.0].define(version: 2023_04_07_093205) do
ActiveRecord::Schema[7.0].define(version: 2023_04_27_124337) do
# These are extensions that must be enabled in order to support this database
enable_extension "pgcrypto"
enable_extension "plpgsql"
Expand Down Expand Up @@ -350,6 +350,7 @@
t.datetime "released_at", precision: nil
t.text "publisher"
t.datetime "file_last_edited", precision: nil
t.text "external_link_description"
t.index ["quizzable_type", "quizzable_id"], name: "index_media_on_quizzable_type_and_quizzable_id"
t.index ["teachable_type", "teachable_id"], name: "index_media_on_teachable_type_and_teachable_id"
end
Expand Down