Skip to content

Commit

Permalink
Implement responsive design
Browse files Browse the repository at this point in the history
  • Loading branch information
@TakumiMiyazawaAbel
TakumiMiyazawaAbel committed Feb 20, 2025
1 parent 9aea1c5 commit f80eef3
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 52 deletions.
9 changes: 9 additions & 0 deletions ckanext/feedback/assets/css/admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,12 @@ input[name="tab-menu"] {
overflow: hidden;
text-overflow: ellipsis;
}

[class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}

.row {
margin-bottom: 0px;
}
27 changes: 7 additions & 20 deletions ckanext/feedback/assets/css/tooltip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,17 @@
.bubbleText {
display: none;
position: absolute;
bottom: 100%;
padding: 5px;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
font-size: 9px;
text-align: center;
color: #fff;
border-radius: 5px;
background: #000;
width: 125px;
width: auto;
white-space: nowrap;
}
.bubbleText:before {
content: "";
Expand All @@ -29,24 +32,8 @@
left: 50%;
border: 5px solid transparent;
border-top: 5px solid #000;
margin-left: -15px;
}
.bubbleText.position-right:before {
content: "";
position: absolute;
top: 100%;
left: 58%;
border: 5px solid transparent;
border-top: 5px solid #000;
margin-left: -15px;
transform: translateX(-50%);
}
.bubble:hover .bubbleText{
display: inline-block;
top: -25px;
left: -40px;
}
.bubble:hover .bubbleText.position-right {
display: inline-block;
top: -25px;
left: -43px;
}
64 changes: 32 additions & 32 deletions ckanext/feedback/templates/admin/approval_and_delete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,17 +50,17 @@ <h2>{{ _('Approval and Delete') }}</h2>
<div class="container" style="width: 100%;">
{% if page.collection %}
<div class="row form-check-label" style="font-weight: bold;">
<div class="col-md-1" style="max-width: 10px;"><input class="checkbox-inline" style="margin: 0;" type="checkbox" id="target-checkbox-all"></div>
<div class="col-md-2">{{ _('Dataset') }}</div>
<div class="col-md-2">{{ _('Resource') }}</div>
<div class="col-md-1">{{ _('Type') }}</div>
<div class="col-md-4" style="min-width: 37%;">{{ _('Post Content') }}</div>
<div class="col-md-2">{{ _('Status') }}</div>
<div class="col-md-1" style="float:left; max-width: 25px;"><input class="checkbox-inline" style="margin: 0;" type="checkbox" id="target-checkbox-all"></div>
<div class="col-md-2" style="text-align: center;">{{ _('Dataset') }}</div>
<div class="col-md-2" style="text-align: center;">{{ _('Resource') }}</div>
<div class="col-md-1" style="text-align: center;">{{ _('Type') }}</div>
<div class="col-md-4" style="min-width: 37%; text-align: center;">{{ _('Post Content') }}</div>
<div class="col-md-2" style="text-align: center;">{{ _('Status') }}</div>
</div>
<div style="border-top: 1px solid #eeeeee; margin-bottom: 8px;"></div>
{% for feedback in page.collection %}
<div class="row form-check-label" style="font-size: 14px;">
<div class="col-md-1 target" style="max-width: 10px;">
<div class="col-md-1 target" style="max-width: 25px;">
{% if feedback.feedback_type == 'リソースコメント' %}
<input class="checkbox-inline" style="margin: 0;" type="checkbox" name="resource-comments-checkbox" id="{{ feedback.comment_id }}" value="{{ feedback.comment_id }}" data-approval="{{ feedback.is_approved }}">
{% elif feedback.feedback_type == '利活用申請' %}
Expand All @@ -72,28 +72,28 @@ <h2>{{ _('Approval and Delete') }}</h2>
<a class="col-md-2 text-truncate" href="{{ h.url_for('dataset.search') }}{{ feedback.package_name }}">{{ feedback.package_title }}</a>
<a class="col-md-2 text-truncate" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;" href="{{ h.url_for('dataset.search') }}{{ feedback.package_name }}/resource/{{ feedback.resource_id }}">{{ feedback.resource_name }}</a>
{% if feedback.feedback_type == 'リソースコメント' %}
<div class="col-md-1 bubble" style="margin-right: 0;">
<div class="col-md-1 bubble" style="display: flex; height: 20px; justify-content: center; align-items: center; margin-right: 0;">
<i class="fa-solid fa-comment-dots"></i>
<div class="bubbleText position-right">{{ _('Resource Comment') }}</div>
<div class="bubbleText">{{ _('Resource Comment') }}</div>
</div>
<a class="col-md-4 text-truncate" style="min-width: 37%;" href="{{ h.url_for('resource_comment.comment', resource_id=feedback.resource_id) }}#comment-created-{{ feedback.comment_id }}">{{ feedback.content }}</a>
{% elif feedback.feedback_type == '利活用申請' %}
<div class="col-md-1 bubble" style="margin-right: 0;">
<div class="col-md-1 bubble" style="display: flex; height: 20px; justify-content: center; align-items: center; margin-right: 0;">
<i class="fa-solid fa-seedling"></i>
<div class="bubbleText position-right">{{ _('Utilization') }}</div>
<div class="bubbleText">{{ _('Utilization') }}</div>
</div>
<a class="col-md-4 text-truncate" style="min-width: 37%;" href="{{ h.url_for('utilization.details', utilization_id=feedback.utilization_id) }}">{{ feedback.content }}</a>
{% elif feedback.feedback_type == '利活用コメント' %}
<div class="col-md-1 bubble" style="margin-right: 0;">
<div class="col-md-1 bubble" style="display: flex; height: 20px; justify-content: center; align-items: center; margin-right: 0;">
<span class="fa-stack" style="font-size: 7px;">
<i class="fa fa-comment fa-stack-2x" style="text-align: start;"></i>
<i class="fa-solid fa-seedling fa-stack-1x" style="color: #ffffff; text-align: start; margin-left: 3.3px;"></i>
<i class="fa fa-comment fa-stack-2x"></i>
<i class="fa-solid fa-seedling fa-stack-1x" style="color: #ffffff;"></i>
</span>
<div class="bubbleText position-right">{{ _('Utilization Comment') }}</div>
<div class="bubbleText">{{ _('Utilization Comment') }}</div>
</div>
<a class="col-md-4 text-truncate" style="min-width: 37%;" href="{{ h.url_for('utilization.details', utilization_id=feedback.utilization_id) }}#comment-created-{{ feedback.comment_id }}">{{ feedback.content }}</a>
{% endif %}
<div class="col-md-2">
<div class="col-md-2" style="display: flex; justify-content: center;">
{% if feedback.is_approved %}
{{ _('Approved') }}
{% else %}
Expand Down Expand Up @@ -125,16 +125,16 @@ <h2>{{ _('Approval and Delete') }}</h2>
<div class="container">
{% if page.collection %}
<div class="row form-check-label fs-6 border-bottom fw-bold mb-2">
<div class="col-1" style="float:left; max-width: 10px;"><input class="checkbox-inline" type="checkbox" id="target-checkbox-all"></div>
<div class="col-2">{{ _('Dataset') }}</div>
<div class="col-2">{{ _('Resource') }}</div>
<div class="col-1">{{ _('Type') }}</div>
<div class="col" style="min-width: 37%;">{{ _('Post Content') }}</div>
<div class="col-2">{{ _('Status') }}</div>
<div class="col-1" style="float:left; max-width: 25px;"><input class="checkbox-inline" type="checkbox" id="target-checkbox-all"></div>
<div class="col-2" style="text-align: center;">{{ _('Dataset') }}</div>
<div class="col-2" style="text-align: center;">{{ _('Resource') }}</div>
<div class="col-1" style="text-align: center;">{{ _('Type') }}</div>
<div class="col" style="min-width: 37%; text-align: center;">{{ _('Post Content') }}</div>
<div class="col-2" style="text-align: center;">{{ _('Status') }}</div>
</div>
{% for feedback in page.collection %}
<div class="row form-check-label fs-6">
<div class="col-1 target" style="float:left; max-width: 10px;">
<div class="col-1 target" style="float:left; max-width: 25px;">
{% if feedback.feedback_type == 'リソースコメント' %}
<input class="checkbox-inline" type="checkbox" name="resource-comments-checkbox" id="{{ feedback.comment_id }}" value="{{ feedback.comment_id }}" data-approval="{{ feedback.is_approved }}">
{% elif feedback.feedback_type == '利活用申請' %}
Expand All @@ -146,28 +146,28 @@ <h2>{{ _('Approval and Delete') }}</h2>
<a class="col-2 text-truncate" href="{{ h.url_for('dataset.search') }}{{ feedback.package_name }}">{{ feedback.package_title }}</a>
<a class="col-2 text-truncate" href="{{ h.url_for('dataset.search') }}{{ feedback.package_name }}/resource/{{ feedback.resource_id }}">{{ feedback.resource_name }}</a>
{% if feedback.feedback_type == 'リソースコメント' %}
<div class="col-1 bubble" style="margin-right: 0;">
<div class="col-1 bubble" style="display: flex; justify-content: center; align-items: center; margin-right: 0;">
<i class="fa-solid fa-comment-dots"></i>
<div class="bubbleText position-right">{{ _('Resource Comment') }}</div>
<div class="bubbleText">{{ _('Resource Comment') }}</div>
</div>
<a class="col text-truncate" style="min-width: 37%;" href="{{ h.url_for('resource_comment.comment', resource_id=feedback.resource_id) }}#comment-created-{{ feedback.comment_id }}">{{ feedback.content }}</a>
{% elif feedback.feedback_type == '利活用申請' %}
<div class="col-1 bubble" style="margin-right: 0;">
<div class="col-1 bubble" style="display: flex; justify-content: center; align-items: center; margin-right: 0;">
<i class="fa-solid fa-seedling"></i>
<div class="bubbleText position-right">{{ _('Utilization') }}</div>
<div class="bubbleText">{{ _('Utilization') }}</div>
</div>
<a class="col text-truncate" style="min-width: 37%;" href="{{ h.url_for('utilization.details', utilization_id=feedback.utilization_id) }}">{{ feedback.content }}</a>
{% elif feedback.feedback_type == '利活用コメント' %}
<div class="col-1 bubble" style="margin-right: 0;">
<div class="col-1 bubble" style="display: flex; justify-content: center; align-items: center; margin-right: 0;">
<span class="fa-stack" style="font-size: 7px;">
<i class="fa fa-comment fa-stack-2x" style="text-align: start;"></i>
<i class="fa-solid fa-seedling fa-stack-1x" style="color: #ffffff; text-align: start; margin-left: 3.3px;"></i>
<i class="fa fa-comment fa-stack-2x"></i>
<i class="fa-solid fa-seedling fa-stack-1x" style="color: #ffffff;"></i>
</span>
<div class="bubbleText position-right">{{ _('Utilization Comment') }}</div>
<div class="bubbleText">{{ _('Utilization Comment') }}</div>
</div>
<a class="col text-truncate" style="min-width: 37%;" href="{{ h.url_for('utilization.details', utilization_id=feedback.utilization_id) }}#comment-created-{{ feedback.comment_id }}">{{ feedback.content }}</a>
{% endif %}
<div class="col-2 text-truncate">
<div class="col-2 text-truncate" style="display: flex; justify-content: center;">
{% if feedback.is_approved %}
{{ _('Approved') }}
{% else %}
Expand Down

0 comments on commit f80eef3

Please sign in to comment.