From adf0e3087714c66a7664d348aabca0acd345be2f Mon Sep 17 00:00:00 2001 From: Kumari Niharika Date: Tue, 18 Nov 2025 13:48:46 +0530 Subject: [PATCH 1/9] OTWO-7469 people page ui fix for tablet --- .../stylesheets/accounts/mini_header.sass | 6 +- app/assets/stylesheets/accounts/show.sass | 7 +- .../stylesheets/forums_topics_posts.sass | 1 + app/assets/stylesheets/mobile_typography.scss | 78 ++++++ app/assets/stylesheets/positions.sass | 1 - app/assets/stylesheets/search-dingus.sass | 9 +- app/assets/stylesheets/sidebar.sass | 2 +- .../stylesheets/thickbox_responsive.scss | 249 ++++++++++++++++++ app/views/accounts/_mini_header.html.haml | 16 +- app/views/accounts/edit.html.haml | 2 +- app/views/accounts/languages/index.html.haml | 6 +- app/views/accounts/settings.html.haml | 14 +- app/views/accounts/show.html.haml | 2 +- .../show/_commits_by_projects.html.haml | 6 +- app/views/accounts/show/_header.html.haml | 4 +- app/views/alter_passwords/edit.html.haml | 4 +- app/views/kudos/index.html.haml | 2 +- app/views/kudos/new.html.haml | 2 +- .../layouts/partials/_footer_nav.html.haml | 7 +- app/views/layouts/partials/_sidebar.html.haml | 8 +- .../_commits_by_individual_projects.html.haml | 77 +++--- app/views/positions/index.html.haml | 2 +- app/views/posts/_post.html.haml | 2 +- app/views/posts/_posts.html.haml | 4 +- app/views/posts/_reply.html.haml | 4 +- app/views/posts/edit.html.haml | 12 +- .../shared/search_dingus/_sort.html.haml | 2 +- 27 files changed, 427 insertions(+), 102 deletions(-) create mode 100644 app/assets/stylesheets/mobile_typography.scss create mode 100644 app/assets/stylesheets/thickbox_responsive.scss diff --git a/app/assets/stylesheets/accounts/mini_header.sass b/app/assets/stylesheets/accounts/mini_header.sass index 3669cc3c9..8cda2b987 100644 --- a/app/assets/stylesheets/accounts/mini_header.sass +++ b/app/assets/stylesheets/accounts/mini_header.sass @@ -5,10 +5,8 @@ #mini_account_header .laurel img margin-top: -8px #mini_account_row - min-height: 100px display: table float: left - margin-top: -10px .col-md-1 padding-left: 0px display: table-cell @@ -21,7 +19,9 @@ height: 9px display: block #mini_account_header - min-height: 80px + margin-top: -15px position: relative + min-height: 80px + margin-left: -10px form display: inline diff --git a/app/assets/stylesheets/accounts/show.sass b/app/assets/stylesheets/accounts/show.sass index ecedde452..5f7469fe4 100644 --- a/app/assets/stylesheets/accounts/show.sass +++ b/app/assets/stylesheets/accounts/show.sass @@ -26,7 +26,6 @@ #account_header margin-top: -15px margin-left: 20px - width: 790px position: relative min-height: 145px .info @@ -44,11 +43,10 @@ display: inline @media only all and (min-width: 320px) and (max-width: 480px) #account_header - width: auto .social-connect .btn-info font-size: 10px !important - #account_name + #account_name_header margin-top: -134px margin-left: 64px h1 @@ -89,9 +87,8 @@ font-size: 6px !important @media (min-width: 540px) and (max-width: 1024px) #account_header - width: 83.33333333%; margin-left: 8px - #account_name + #account_name_header h1 font-size: 24px !important width: auto diff --git a/app/assets/stylesheets/forums_topics_posts.sass b/app/assets/stylesheets/forums_topics_posts.sass index f989b3334..59f8b4203 100644 --- a/app/assets/stylesheets/forums_topics_posts.sass +++ b/app/assets/stylesheets/forums_topics_posts.sass @@ -71,6 +71,7 @@ #post_body_text_size font-size: 13px + word-wrap: break-word .well.posts ul li margin-left: 20px diff --git a/app/assets/stylesheets/mobile_typography.scss b/app/assets/stylesheets/mobile_typography.scss new file mode 100644 index 000000000..b961021a0 --- /dev/null +++ b/app/assets/stylesheets/mobile_typography.scss @@ -0,0 +1,78 @@ +/* Mobile-only smaller font size globally */ +@media screen and (max-width: 768px) { + body, p, div, span, td, th, li, a { + font-size: small !important; + } + + h1 { + font-size: 1.5rem !important; + } + + h2 { + font-size: 1.25rem !important; + } + + h3 { + font-size: 1.125rem !important; + } + + h4 { + font-size: 1rem !important; + } + + h5, h6 { + font-size: 0.875rem !important; + } + + .btn, button, input[type="submit"], input[type="button"] { + font-size: small !important; + } + + input, select, textarea { + font-size: small !important; + } + + .alert { + font-size: small !important; + } + + table { + font-size: small !important; + } + + label, .control-label { + font-size: small !important; + } + + .badge, .label { + font-size: small !important; + } + + .breadcrumb { + font-size: small !important; + } + + .pagination { + font-size: small !important; + } + + nav, .nav, .navbar { + font-size: small !important; + } + + .panel, .card { + font-size: small !important; + } + + .modal-body { + font-size: small !important; + } + + footer, .footer { + font-size: small !important; + } + + code, pre { + font-size: small !important; + } +} diff --git a/app/assets/stylesheets/positions.sass b/app/assets/stylesheets/positions.sass index c607c8016..6ee82cb9d 100644 --- a/app/assets/stylesheets/positions.sass +++ b/app/assets/stylesheets/positions.sass @@ -24,7 +24,6 @@ right: 0px .one-project - width: 940px background-color: #F2F2F2 margin-top: 20px margin-bottom: 10px diff --git a/app/assets/stylesheets/search-dingus.sass b/app/assets/stylesheets/search-dingus.sass index d50a2363f..421ac9d7f 100644 --- a/app/assets/stylesheets/search-dingus.sass +++ b/app/assets/stylesheets/search-dingus.sass @@ -8,11 +8,7 @@ display: inline !important select width: 400px - .col-md-5 - width: 43% - .col-md-4 - width: 32% #sort_by float: right padding-right: 10px @@ -39,6 +35,11 @@ #enlistment_edits input width: 14px + .col-xs-3 + select + width: 70px + #enlistment_checkbox + margin-left: -18px #nav-top-bar form#quicksearch .caret diff --git a/app/assets/stylesheets/sidebar.sass b/app/assets/stylesheets/sidebar.sass index f30f3287b..dffe8d551 100644 --- a/app/assets/stylesheets/sidebar.sass +++ b/app/assets/stylesheets/sidebar.sass @@ -118,7 +118,7 @@ display: flex flex-direction: row flex-wrap: wrap - width: 100% + width: auto .actions width: 50% \ No newline at end of file diff --git a/app/assets/stylesheets/thickbox_responsive.scss b/app/assets/stylesheets/thickbox_responsive.scss new file mode 100644 index 000000000..fadb8e933 --- /dev/null +++ b/app/assets/stylesheets/thickbox_responsive.scss @@ -0,0 +1,249 @@ +/* Responsive Thickbox CSS - Layout Only, No Color Changes */ + +/* Base overlay adjustments */ +#TB_overlay { + position: fixed !important; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; + z-index: 100; +} + +/* Main window responsive adjustments */ +#TB_window { + position: fixed !important; + z-index: 102; + text-align: left; + + /* Desktop default */ + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + margin: 0 !important; + + /* Responsive sizing - only apply max constraints */ + max-width: 95vw; + max-height: 95vh; + overflow: auto; +} + +/* Tablet styles (769px to 1024px) - Keep desktop behavior */ +@media screen and (min-width: 769px) and (max-width: 1024px) { + #TB_window { + /* Keep original thickbox sizing for tablets */ + max-width: 90vw; + max-height: 90vh; + } + + #TB_Image { + max-width: 100% !important; + height: auto !important; + } +} + +/* Mobile phones only (max-width: 768px) */ +@media screen and (max-width: 768px) { + #TB_window { + width: 95% !important; + height: auto !important; + max-height: 90vh; + margin: 0 !important; + } + + /* Image display on mobile */ + #TB_Image { + max-width: 100% !important; + height: auto !important; + display: block; + margin: 0 auto; + } + + /* Caption styling - layout only */ + #TB_caption { + padding: 10px 15px; + line-height: 1.4; + } + + /* Navigation buttons - layout only */ + #TB_secondLine { + margin-top: 8px; + } + + #TB_prev, #TB_next { + display: inline-block; + padding: 5px 10px; + margin: 0 5px; + } + + /* Close button - layout only */ + #TB_closeWindow { + padding: 8px 15px; + text-align: center; + } + + #TB_closeWindowButton { + padding: 5px 15px; + text-decoration: none; + } +} + +/* Tablet styles */ +@media screen and (min-width: 769px) and (max-width: 1024px) { + #TB_window { + width: 80% !important; + max-width: 700px; + max-height: 85vh; + } + + #TB_Image { + max-width: 100% !important; + height: auto !important; + } +} + +/* Small mobile devices only (max-width: 480px) */ +@media screen and (max-width: 480px) { + #TB_window { + width: 98% !important; + } + + #TB_caption { + padding: 8px 10px; + } + + #TB_prev, #TB_next { + padding: 4px 8px; + } + + #TB_closeWindow { + padding: 6px 10px; + } + + #TB_closeWindowButton { + padding: 4px 12px; + } +} + +/* Ajax content responsive - mobile only */ +#TB_ajaxContent { + overflow: auto; + padding: 15px; +} + +@media screen and (max-width: 768px) { + #TB_ajaxContent { + padding: 10px; + line-height: 1.4; + } +} + +@media screen and (max-width: 480px) { + #TB_ajaxContent { + padding: 8px; + } +} + +/* Modal specific adjustments - mobile only */ +@media screen and (max-width: 768px) { + .TB_modal { + padding: 15px !important; + } +} + +@media screen and (max-width: 480px) { + .TB_modal { + padding: 10px !important; + } +} + +/* Title bar responsive - mobile only */ +#TB_title { + height: auto !important; + padding: 10px 15px; +} + +@media screen and (max-width: 768px) { + #TB_title { + padding: 8px 10px; + } +} + +#TB_ajaxWindowTitle { + margin-bottom: 0; +} + +/* Close button in title - mobile only */ +#TB_closeAjaxWindow { + text-align: right; + margin-top: 5px; +} + +@media screen and (max-width: 768px) { + #TB_closeAjaxWindow { + text-align: center; + margin-top: 8px; + } +} + +/* Loading animation - layout only */ +#TB_load { + position: fixed !important; + top: 50% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + z-index: 101; +} + +/* Iframe responsive - mobile only */ +@media screen and (max-width: 768px) { + #TB_iframeContent { + width: 100% !important; + height: 70vh !important; + } +} + +@media screen and (max-width: 480px) { + #TB_iframeContent { + height: 60vh !important; + } +} + +/* Touch-friendly improvements - mobile only */ +@media screen and (max-width: 768px) and (hover: none) and (pointer: coarse) { + #TB_closeWindowButton, + #TB_prev a, + #TB_next a { + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 15px; + } +} + +/* Mobile scroll and touch optimization */ +@media screen and (max-width: 768px) { + #TB_overlay { + /* Prevent zoom on double-tap */ + touch-action: manipulation; + } + + #TB_window { + /* Better scrolling on mobile */ + -webkit-overflow-scrolling: touch; + } +} + +/* Landscape orientation adjustments - mobile only */ +@media screen and (max-width: 768px) and (orientation: landscape) and (max-height: 500px) { + #TB_window { + max-height: 95vh !important; + width: 90% !important; + } + + #TB_Image { + max-height: 60vh !important; + width: auto !important; + } +} \ No newline at end of file diff --git a/app/views/accounts/_mini_header.html.haml b/app/views/accounts/_mini_header.html.haml index 8d49a576d..db78c3615 100644 --- a/app/views/accounts/_mini_header.html.haml +++ b/app/views/accounts/_mini_header.html.haml @@ -1,18 +1,18 @@ - lang = @account.most_experienced_language -.margin_top_5#mini_account_row - .col-md-1 +.account_header{ style: 'margin-top: 5px' } + .col-xs-2.col-sm-2.col-md-2#account_icon = link_to account_path(@account) do - = image_tag avatar_img_path(@account, 62), size: '62x62', itemprop: 'image' + = image_tag avatar_img_path(@account, 62), size: '128x128', itemprop: 'image' - if lang - bg_color = language_color(lang.name) - text_color = language_text_color(lang.name) = link_to '', '#', style: "background-color: ##{bg_color}; color: ##{text_color};", title: t('accounts.mini_header.title'), class: 'center primary_language_bg' - .col-md-12#mini_account_header - .info.pull-left{ style: 'width: 40%' } + .col-xs-10.col-sm-10.col-md-10#account_header + .info.pull-left %h1{ itemprop: 'name' } = link_to h(@account.name), account_path(@account) - .col-md-12.pull-left.clearfix + .col-xs-12.col-sm-12.col-md-12.pull-left.clearfix - if @account.location.present? = @account.location %meta{ itemprop: 'homeLocation', content: @account.location } @@ -22,7 +22,7 @@ - unless my_account?(@account) = render partial: 'accounts/show/header/kudo_button', locals: { css: 'btn-minier btn-info link_space' } - if @account.url.present? - .pull-left.col-md-12.clearfix + .pull-left.col-xs-12.col-sm-12.col-md-12.clearfix = link_to @account.url, target: '_blank', title: @account.url, itemprop: 'url', rel: 'nofollow noopener noreferrer' do %i.icon-external-link = truncate(@account.url, length: 60) @@ -33,6 +33,6 @@ = render partial: 'accounts/badges_row', locals: { badges: badges } .clearfix   -.col-md-12 +.col-xs-12.col-sm-12.col-md-12 .mezzo = render partial: 'layouts/partials/alert' diff --git a/app/views/accounts/edit.html.haml b/app/views/accounts/edit.html.haml index 833d94fcd..ab743ccee 100644 --- a/app/views/accounts/edit.html.haml +++ b/app/views/accounts/edit.html.haml @@ -16,7 +16,7 @@ .well.margin_left_15#account-edit-form = form_for @account do |f| %fieldset.row-fluid - .col-md-5 + .col-xs-12.col-sm-12.col-md-5 .form-group %label.control-label.required= t('login') .controls diff --git a/app/views/accounts/languages/index.html.haml b/app/views/accounts/languages/index.html.haml index 3b01ccd25..5b7d8a06e 100644 --- a/app/views/accounts/languages/index.html.haml +++ b/app/views/accounts/languages/index.html.haml @@ -4,14 +4,14 @@ page_context[:select_footer_nav] = :languages - if @account.decorate.account_analysis_status_message.blank? - .col-md-12 + .col-xs-12.col-sm-12.col-md-12 = render partial: 'accounts/languages/commits_by_language' - if @vlfs.present? - .col-md-12#language_detail + .col-xs-12.col-sm-12.col-md-12#language_detail %table.table.table-striped.table-condensed %thead= render partial: 'contributions/language_header' %tbody= render partial: 'contributions/language_fact', collection: @vlfs - else %h2= t('accounts.languages.index.title') - .col-md-12 + .col-xs-12.col-sm-12.col-md-12 %p= @account.decorate.account_analysis_status_message diff --git a/app/views/accounts/settings.html.haml b/app/views/accounts/settings.html.haml index 1596b897e..ce6357dd9 100644 --- a/app/views/accounts/settings.html.haml +++ b/app/views/accounts/settings.html.haml @@ -5,27 +5,27 @@ .full-width.margin_left_20.margin_right_20 .clear_left -.col-md-12 +.col-xs-12.col-sm-12.col-md-12 %h3= t('.settings') .account_settings_options - .account_setting_row - .pull-left.span5.settings_specifications + .row.account_setting_row + .col-md-6.col-sm-6.col-xs-12.settings_specifications %h4= link_to t('.account_basics'), edit_account_path(@account) %span.pull-left %a.account_settings_icon.settings_account_basics{ href: edit_account_path(@account) } %span= t('.account_basics_settings') - .pull-right.span5.settings_specifications + .col-md-6.col-sm-6.col-xs-12.settings_specifications %h4= link_to t('.password'), alter_password_edit_account_path(@account) %span.pull-left %a.account_settings_icon.settings_account_password{ href: alter_password_edit_account_path(@account) } %span= t('.change_passwords') - .account_setting_row - .pull-left.span5.settings_specifications + .row.account_setting_row + .col-md-6.col-sm-6.col-xs-12.settings_specifications %h4= link_to t('.api_keys'), account_api_keys_path(@account) %span.pull-left %a.account_settings_icon.settings_api_keys{ href: account_api_keys_path(@account) } %span= t('.api_key_settings') - .pull-right.span5.settings_specifications + .col-md-6.col-sm-6.col-xs-12.settings_specifications %h4= link_to t('.privacy'), edit_account_privacy_account_path %span.pull-left %a.account_settings_icon.settings_privacy{ href: edit_account_privacy_account_path } diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml index e97233382..5bcb61920 100644 --- a/app/views/accounts/show.html.haml +++ b/app/views/accounts/show.html.haml @@ -16,7 +16,7 @@ = render partial: 'accounts/show/admin' if current_user_is_admin? .mezzo.padding_one_top %h3= t('.dev_history') - .col-sm-12.col-md-12 + .col-xs-12.col-sm-12.col-md-12 - if @account.decorate.account_analysis_status_message %p= @account.decorate.account_analysis_status_message - else diff --git a/app/views/accounts/show/_commits_by_projects.html.haml b/app/views/accounts/show/_commits_by_projects.html.haml index e6249aab6..19e654ed1 100644 --- a/app/views/accounts/show/_commits_by_projects.html.haml +++ b/app/views/accounts/show/_commits_by_projects.html.haml @@ -7,10 +7,10 @@ .clearfix - if only_device? %div{ style: 'height:250px;' } - .chart#project_contributions{ style: 'width:450px; height:200px; margin-left:-26px;', 'datasrc' => chart_url } + .chart#project_contributions{ style: 'height:200px; margin-left:-26px;', 'datasrc' => chart_url } - elsif only_tab? %div{ style: 'height:350px;' } - .chart#project_contributions{ style: 'width:750px; height:300px; margin-left:-28px;', 'datasrc' => chart_url } + .chart#project_contributions{ style: 'height:300px; margin-left:-28px;', 'datasrc' => chart_url } - else %div{ style: 'height:350px;' } - .chart#project_contributions{ style: 'width:950px; height:300px; margin-left:-28px;', 'datasrc' => chart_url } + .chart#project_contributions{ style: 'height:300px; margin-left:-28px;', 'datasrc' => chart_url } diff --git a/app/views/accounts/show/_header.html.haml b/app/views/accounts/show/_header.html.haml index fd2792df5..0f9a48b1f 100644 --- a/app/views/accounts/show/_header.html.haml +++ b/app/views/accounts/show/_header.html.haml @@ -9,7 +9,7 @@ - else   .col-xs-10.col-sm-10.col-md-10#account_header - .pull-left#account_name + .pull-left#account_name_header %h1{ itemprop: 'name' }= h(@account.name) .info = @account.location @@ -43,6 +43,6 @@ = render partial: 'badges_row', locals: { badges: badges, header: :large } .clearfix   -.col-md-12 +.col-xs-12.col-sm-12.col-md-12 .mezzo = render partial: 'layouts/partials/alert' diff --git a/app/views/alter_passwords/edit.html.haml b/app/views/alter_passwords/edit.html.haml index 3a14f78d0..3c9569b30 100644 --- a/app/views/alter_passwords/edit.html.haml +++ b/app/views/alter_passwords/edit.html.haml @@ -2,7 +2,7 @@ = t('.edit_password_title', account: @account.name) %h2= t('.settings_password_html', href: link_to(t('.settings'), settings_account_path(@account))) -.well.col-md-5#center_position +.well.col-xs-12.col-sm-12.col-md-5 = form_for(@account, url: alter_password_edit_account_path) do |f| %fieldset %legend.margin_left_30 @@ -27,7 +27,7 @@ %h4 .soft.inline= t('.about') = t('.password') - %ul.margin_left_40{ style: 'margin-top: -20px' } + %ul.margin_left_40 %li= t('.openhub_foss_resume') %li= t('.password_specifications') %li= t('.confirmation_email') diff --git a/app/views/kudos/index.html.haml b/app/views/kudos/index.html.haml index 8648583e1..14b5d036d 100644 --- a/app/views/kudos/index.html.haml +++ b/app/views/kudos/index.html.haml @@ -2,7 +2,7 @@ content_for(:html_title) { t('.page_title', name: @person.account ? @person.account.name : @person.name) } page_context[:select_footer_nav] = :kudos position = @person ? kudo_position_for_person(@person.id, @person.kudo_position.to_i) : kudo_position_for_person(nil) -.col-md-12 +.col-xs-12.col-sm-12.col-md-12 %h2= t('.title') != position %table#kudo_mantle diff --git a/app/views/kudos/new.html.haml b/app/views/kudos/new.html.haml index a828dd490..31e26cfba 100644 --- a/app/views/kudos/new.html.haml +++ b/app/views/kudos/new.html.haml @@ -1,5 +1,5 @@ .row{ style: 'margin-top: 1em;' } - .col-md-11 + .col-xs-11.col-sm-11.col-md-11 .well = form_for @kudo, as: :kudo, url: kudos_path, html: { method: :post } do |f| %fieldset diff --git a/app/views/layouts/partials/_footer_nav.html.haml b/app/views/layouts/partials/_footer_nav.html.haml index f9cb386ed..8920a9bed 100644 --- a/app/views/layouts/partials/_footer_nav.html.haml +++ b/app/views/layouts/partials/_footer_nav.html.haml @@ -16,7 +16,6 @@ .clearfix.margin_top_15 .margin_left_20.margin_right_20 .footer-navigation - .row - .col-md-12 - .mezzo.margin_bottom_5 - = render 'layouts/partials/navigator' + .col-xs-12.col-sm-12.col-md-12 + .mezzo.margin_bottom_5 + = render 'layouts/partials/navigator' diff --git a/app/views/layouts/partials/_sidebar.html.haml b/app/views/layouts/partials/_sidebar.html.haml index 975af375f..959524f45 100644 --- a/app/views/layouts/partials/_sidebar.html.haml +++ b/app/views/layouts/partials/_sidebar.html.haml @@ -1,8 +1,8 @@ .row{ id: generate_page_name } - .col-md-2 - .col-md-10 + .col-xs-2.col-sm-2.col-md-2 + .col-xs-10.col-sm-10.col-md-10 %h1= page_context[:heading] - .col-md-2.padding_left_5 + .col-xs-2.col-sm-2.col-md-2.padding_left_5 .footer-navigation - page_context[:footer_menu_list].each do |section| %ul.nav.nav-stacked.nav-pills @@ -19,4 +19,4 @@ - link_class, link_name, link_url = link %li.sidebar-nav{ class: "#{link_class} #{'active' if page_context[:select_side_bar] == link_class}" } %a{ href: link_url }= link_name - .col-md-10= yield + .col-xs-10.col-sm-10.col-md-10= yield diff --git a/app/views/positions/_commits_by_individual_projects.html.haml b/app/views/positions/_commits_by_individual_projects.html.haml index 280701a42..8f46075ed 100755 --- a/app/views/positions/_commits_by_individual_projects.html.haml +++ b/app/views/positions/_commits_by_individual_projects.html.haml @@ -1,39 +1,40 @@ -%div{ class: position.decorate.analyzed_class_name } - %div - .one-project-header-left - %a.pull-left.logo{ href: project_path(position.project) } - = position.project.decorate.icon - .col-md-8.one-project-name#projects_similar_page - %a.title{ href: project_path(position.project), title: position.project.name } - = truncate(position.project.name, length: 40) - - project_activity_level_class(position.project, :fifteen) - - organization = position.project.organization - - if organization - = link_to "(#{h(organization.name)})", organization, class: 'project-organization' - .col-md-8.one-project-contribution - %span.contribution_role - = position.title - = position.decorate.affiliation - - if position.description && position.description.strip.size > 179 - %span.one-project-description= expander(position.description, 150, 180) - - elsif position.description - %span.one-project-description{ style: 'display: inline', id: "proj_desc_#{position.id}_lg" } - = position.description +.col-xs-12.col-sm-12.col-md-6.position-item + %div{ class: position.decorate.analyzed_class_name } + %div + .col-xs-6.col-sm-6.col-md-6.one-project-header-left + %a.pull-left.logo{ href: project_path(position.project) } + = position.project.decorate.icon + .col-xs-6.col-sm-6.col-md-6.one-project-name#projects_similar_page + %a.title{ href: project_path(position.project), title: position.project.name } + = truncate(position.project.name, length: 40) + - project_activity_level_class(position.project, :fifteen) + - organization = position.project.organization + - if organization + = link_to "(#{h(organization.name)})", organization, class: 'project-organization' + .col-xs-6.col-sm-6.col-md-6.one-project-contribution + %span.contribution_role + = position.title + = position.decorate.affiliation + - if position.description && position.description.strip.size > 179 + %span.one-project-description= expander(position.description, 150, 180) + - elsif position.description + %span.one-project-description{ style: 'display: inline', id: "proj_desc_#{position.id}_lg" } + = position.description - .one-project-header-right - = render 'edit_link', position: position - = render 'commit_information', position: position - .clear - %div - - if position.name.nil? - .one_project_information_message - = t('.no_commits_to_display') - - elsif position.decorate.analyzed? - = render 'commits_by_individual_project_highchart', position: position - - else - .one_project_information_message.padding_left_30.padding_bottom_20 - = t('.analysis_is_scheduled') - .clear{ style: 'margin-right: 10px' } - - analysis = position.project.try(:best_analysis) - - if analysis - = render 'shared/analysis_timestamp', analysis: analysis, project: position.project + .one-project-header-right + = render 'edit_link', position: position + = render 'commit_information', position: position + .clear + %div + - if position.name.nil? + .one_project_information_message + = t('.no_commits_to_display') + - elsif position.decorate.analyzed? + = render 'commits_by_individual_project_highchart', position: position + - else + .one_project_information_message.padding_left_30.padding_bottom_20 + = t('.analysis_is_scheduled') + .clear{ style: 'margin-right: 10px' } + - analysis = position.project.try(:best_analysis) + - if analysis + = render 'shared/analysis_timestamp', analysis: analysis, project: position.project diff --git a/app/views/positions/index.html.haml b/app/views/positions/index.html.haml index cb1e3399d..09a584858 100755 --- a/app/views/positions/index.html.haml +++ b/app/views/positions/index.html.haml @@ -13,7 +13,7 @@ #positions-index-page - if @account.positions.exists? = render 'commits_by_projects_extended' - .mezzo.padding_one_top + .row.mezzo.padding_one_top - @positions.each do |position| = render 'commits_by_individual_projects', position: position = will_paginate @positions diff --git a/app/views/posts/_post.html.haml b/app/views/posts/_post.html.haml index edcdc2d0c..3b8b1f67e 100644 --- a/app/views/posts/_post.html.haml +++ b/app/views/posts/_post.html.haml @@ -1,7 +1,7 @@ .well.posts{ style: post.account.access.admin? ? 'background: #D5E3E9;' : 'background: #F6F6F6' } = find_and_preserve(markdown_format(post.body)) .clearfix.margin_top_10 - .col-md-3.pull-right + .col-xs-3.col-sm-3.col-md-3.pull-right .pull-left %a= avatar_img_for post.account, 42 .pull-left.margin_left_5 diff --git a/app/views/posts/_posts.html.haml b/app/views/posts/_posts.html.haml index 6b38b7e70..9f7347bf6 100644 --- a/app/views/posts/_posts.html.haml +++ b/app/views/posts/_posts.html.haml @@ -1,11 +1,11 @@ .well.posts - .col-md-8{ style: 'width: 540px' } + .col-xs-8.col-sm-8.col-md-8 %h4.margin_top_0#post_body_link_size = link_to h(posts.topic.forum.name), forum_path(posts.topic.forum) \: = link_to h(posts.topic.title), topic_path(posts.topic) %p.margin_top_15#post_body_text_size= expander(strip_tags(markdown_format(posts.body)), 200, 250) - .col-md-4 + .col-xs-4.col-sm-4.col-md-4 .float_left{ style: 'margin-left: -20px' } %div= t('.views') %div{ style: 'margin-top: 12px' }= t('.author') diff --git a/app/views/posts/_reply.html.haml b/app/views/posts/_reply.html.haml index e68bd22ea..db729f715 100644 --- a/app/views/posts/_reply.html.haml +++ b/app/views/posts/_reply.html.haml @@ -1,11 +1,11 @@ - if logged_in? .row - .col-md-9.pull-left + .col-xs-9.col-sm-9.col-md-9.pull-left %h3= t('.post_a_response') = form_for @post, url: topic_posts_path(@topic) do |f| = hidden_field_tag :page, params[:page] = render partial: 'posts/fields', locals: { f: f } - .col-md-2.margin_top_15.margin_left_25 + .col-xs-3.col-sm-3.col-md-3.margin_top_15.margin_left_25 = render 'shared/markdown_help' - else diff --git a/app/views/posts/edit.html.haml b/app/views/posts/edit.html.haml index 476a489da..442695478 100644 --- a/app/views/posts/edit.html.haml +++ b/app/views/posts/edit.html.haml @@ -2,13 +2,13 @@ = t('.edit_title') %br -.col-md-12 +.col-xs-12.col-sm-12.col-md-12 = render partial: 'forums/breadcrumb', locals: { forum: @post.topic.forum } .clear .row - .col-md-8.pull-left.margin_top_10 + .col-xs-8.col-sm-8.col-md-8.pull-left.margin_top_10 %h2= t('.edit_post') - .col-md-3.pull-right + .col-xs-3.col-sm-3.col-md-3.pull-right - if current_user_is_admin? .btn-group .pull-left @@ -19,9 +19,9 @@ = button_to t('.delete'), topic_post_path(@topic, @post), method: :delete, data: { confirm: t('.delete_confirmation') }, class: 'btn btn-danger btn-mini' -.well.col-md-12 - .col-md-9 +.well.col-xs-12.col-sm-12.col-md-12 + .col-xs-9.col-sm-9.col-md-9 = form_for([@topic, @post], url: topic_post_path(@topic, @post), html: { method: 'put' }) do |f| = render partial: 'fields', locals: { f: f } - .col-md-2.margin_left_30.margin_top_10 + .col-xs-2.col-sm-2.col-md-2.margin_left_30.margin_top_10 = render partial: 'shared/markdown_help' diff --git a/app/views/shared/search_dingus/_sort.html.haml b/app/views/shared/search_dingus/_sort.html.haml index 812a17ea1..4e18b834e 100644 --- a/app/views/shared/search_dingus/_sort.html.haml +++ b/app/views/shared/search_dingus/_sort.html.haml @@ -14,7 +14,7 @@ class: 'chzn-select', onchange: 'this.form.submit()' - elsif filter_type == :radiobutton - %label.radio.inline.margin_left_40 + %label.radio.inline = radio_button_tag('find_by', 'name', params[:find_by] != 'email') = t('.by_name') %label.radio.inline From 0fcb4942b7fcf6918beaed66480023bcf4c63955 Mon Sep 17 00:00:00 2001 From: Priya Rani Date: Tue, 18 Nov 2025 16:52:37 +0530 Subject: [PATCH 2/9] Fix account badges alignment for different device view --- app/assets/stylesheets/accounts/show.sass | 3 +-- app/assets/stylesheets/badges.sass | 7 ++++--- app/views/accounts/_badges_row.html.haml | 2 -- app/views/accounts/_mini_header.html.haml | 4 ++-- app/views/accounts/show/_header.html.haml | 10 +++++----- 5 files changed, 12 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/accounts/show.sass b/app/assets/stylesheets/accounts/show.sass index 5f7469fe4..b5d23cc46 100644 --- a/app/assets/stylesheets/accounts/show.sass +++ b/app/assets/stylesheets/accounts/show.sass @@ -47,8 +47,7 @@ .btn-info font-size: 10px !important #account_name_header - margin-top: -134px - margin-left: 64px + margin-top: 10px h1 font-size: 14px !important width: auto diff --git a/app/assets/stylesheets/badges.sass b/app/assets/stylesheets/badges.sass index e0b3d433b..57a5a41d2 100644 --- a/app/assets/stylesheets/badges.sass +++ b/app/assets/stylesheets/badges.sass @@ -87,7 +87,7 @@ &.last :margin-right 0 -#account_header +.account_header .mini-badges-section position: relative margin: 27px 4px 0 0 @@ -98,9 +98,10 @@ &.last margin-right: 0 @media only all and (min-width: 320px) and (max-width: 480px) - #account_header + .account_header .mini-badges-section - margin: 5px 43px 0 0 + margin: 0 0 15px + display: flex .account-badge margin: 0 20px 20px 0 diff --git a/app/views/accounts/_badges_row.html.haml b/app/views/accounts/_badges_row.html.haml index 9e720aeef..8a5a18b4c 100644 --- a/app/views/accounts/_badges_row.html.haml +++ b/app/views/accounts/_badges_row.html.haml @@ -2,8 +2,6 @@ - hide_foss_logo ||= false - badges.each_with_index do |badge, index| - - if header == :large && index == 4 - %br.clear - if !hide_foss_logo - css_class = badge.css_class(badges.length, header, index) = link_to blog_url_for(:badges), class: "pull-left account-badge #{css_class}", diff --git a/app/views/accounts/_mini_header.html.haml b/app/views/accounts/_mini_header.html.haml index db78c3615..4797fbc57 100644 --- a/app/views/accounts/_mini_header.html.haml +++ b/app/views/accounts/_mini_header.html.haml @@ -1,6 +1,6 @@ - lang = @account.most_experienced_language .account_header{ style: 'margin-top: 5px' } - .col-xs-2.col-sm-2.col-md-2#account_icon + .col-xs-4.col-sm-2.col-md-2#account_icon = link_to account_path(@account) do = image_tag avatar_img_path(@account, 62), size: '128x128', itemprop: 'image' - if lang @@ -8,7 +8,7 @@ - text_color = language_text_color(lang.name) = link_to '', '#', style: "background-color: ##{bg_color}; color: ##{text_color};", title: t('accounts.mini_header.title'), class: 'center primary_language_bg' - .col-xs-10.col-sm-10.col-md-10#account_header + .col-xs-8.col-sm-10.col-md-10#account_header .info.pull-left %h1{ itemprop: 'name' } = link_to h(@account.name), account_path(@account) diff --git a/app/views/accounts/show/_header.html.haml b/app/views/accounts/show/_header.html.haml index 0f9a48b1f..08843e20a 100644 --- a/app/views/accounts/show/_header.html.haml +++ b/app/views/accounts/show/_header.html.haml @@ -1,5 +1,5 @@ .account_header{ style: 'margin-top: 10px' } - .col-xs-2.col-sm-2.col-md-2#account_icon + .col-xs-4.col-sm-3.col-md-2#account_icon = image_tag avatar_img_path(@account, 128), size: '128x128', itemprop: 'image' - lang = @account.most_experienced_language - if lang @@ -8,7 +8,7 @@ = lang.nice_name - else   - .col-xs-10.col-sm-10.col-md-10#account_header + .col-xs-7.col-sm-4.col-md-7#account_header .pull-left#account_name_header %h1{ itemprop: 'name' }= h(@account.name) .info @@ -38,9 +38,9 @@ rel: 'popup', title: "Follow @#{@account.twitter_account}" do %i.icon-twitter = render partial: 'accounts/show/header/kudo_button', locals: { css: 'btn-mini btn-info' } - .mini-badges-section.pull-right - - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) } - = render partial: 'badges_row', locals: { badges: badges, header: :large } + .col-xs-12.col-sm-5.col-md-3.mini-badges-section + - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) } + = render partial: 'badges_row', locals: { badges: badges } .clearfix   .col-xs-12.col-sm-12.col-md-12 From d039bd5bc84103ea41cab4ed2023afbb14e90169 Mon Sep 17 00:00:00 2001 From: Priya Rani Date: Tue, 18 Nov 2025 17:45:10 +0530 Subject: [PATCH 3/9] Fix badge alignment in footer navigation --- app/assets/stylesheets/badges.sass | 2 ++ app/views/accounts/_mini_header.html.haml | 7 ++++--- app/views/accounts/show/_header.html.haml | 7 ++++--- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/badges.sass b/app/assets/stylesheets/badges.sass index 57a5a41d2..c3da942b9 100644 --- a/app/assets/stylesheets/badges.sass +++ b/app/assets/stylesheets/badges.sass @@ -91,6 +91,7 @@ .mini-badges-section position: relative margin: 27px 4px 0 0 + float: right .account-badge margin: 0 20px 31px 0 height: 48px @@ -102,6 +103,7 @@ .mini-badges-section margin: 0 0 15px display: flex + float: none .account-badge margin: 0 20px 20px 0 diff --git a/app/views/accounts/_mini_header.html.haml b/app/views/accounts/_mini_header.html.haml index 4797fbc57..41e6ab280 100644 --- a/app/views/accounts/_mini_header.html.haml +++ b/app/views/accounts/_mini_header.html.haml @@ -1,6 +1,6 @@ - lang = @account.most_experienced_language .account_header{ style: 'margin-top: 5px' } - .col-xs-4.col-sm-2.col-md-2#account_icon + .col-xs-4.col-sm-3.col-md-2#account_icon = link_to account_path(@account) do = image_tag avatar_img_path(@account, 62), size: '128x128', itemprop: 'image' - if lang @@ -8,7 +8,7 @@ - text_color = language_text_color(lang.name) = link_to '', '#', style: "background-color: ##{bg_color}; color: ##{text_color};", title: t('accounts.mini_header.title'), class: 'center primary_language_bg' - .col-xs-8.col-sm-10.col-md-10#account_header + .col-xs-7.col-sm-4.col-md-7#account_header .info.pull-left %h1{ itemprop: 'name' } = link_to h(@account.name), account_path(@account) @@ -28,7 +28,8 @@ = truncate(@account.url, length: 60) .clearfix %meta{ itemprop: 'interactionCount', content: @account.kudo_rank } - .mini-badges-section.pull-right + .col-xs-12.col-sm-5.col-md-3 + .mini-badges-section - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) } = render partial: 'accounts/badges_row', locals: { badges: badges } diff --git a/app/views/accounts/show/_header.html.haml b/app/views/accounts/show/_header.html.haml index 08843e20a..52f0e32e5 100644 --- a/app/views/accounts/show/_header.html.haml +++ b/app/views/accounts/show/_header.html.haml @@ -38,9 +38,10 @@ rel: 'popup', title: "Follow @#{@account.twitter_account}" do %i.icon-twitter = render partial: 'accounts/show/header/kudo_button', locals: { css: 'btn-mini btn-info' } - .col-xs-12.col-sm-5.col-md-3.mini-badges-section - - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) } - = render partial: 'badges_row', locals: { badges: badges } + .col-xs-12.col-sm-5.col-md-3 + .mini-badges-section + - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) } + = render partial: 'badges_row', locals: { badges: badges } .clearfix   .col-xs-12.col-sm-12.col-md-12 From 10fbaf391cdf675053236fc5591103dda57baecf Mon Sep 17 00:00:00 2001 From: Kumari Niharika Date: Tue, 18 Nov 2025 23:31:37 +0530 Subject: [PATCH 4/9] managed_projects page fix fir tablet and mobile --- .../stylesheets/accounts/languages.sass | 12 +- ...managed_projects_bootstrap_responsive.scss | 105 ++++++++++++++++++ app/assets/stylesheets/projects.sass | 7 -- app/assets/stylesheets/search-dingus.sass | 15 +++ app/assets/stylesheets/streamgraph.sass | 19 ++-- .../stylesheets/streamgraph_responsive.sass | 25 +++++ ..._by_individual_project_highchart.html.haml | 2 +- .../_commits_by_individual_projects.html.haml | 2 +- .../_commits_by_projects_extended.html.haml | 2 +- app/views/positions/index.html.haml | 2 +- 10 files changed, 167 insertions(+), 24 deletions(-) create mode 100644 app/assets/stylesheets/managed_projects_bootstrap_responsive.scss create mode 100644 app/assets/stylesheets/streamgraph_responsive.sass diff --git a/app/assets/stylesheets/accounts/languages.sass b/app/assets/stylesheets/accounts/languages.sass index f97f6bab5..cdbb71c3f 100644 --- a/app/assets/stylesheets/accounts/languages.sass +++ b/app/assets/stylesheets/accounts/languages.sass @@ -23,4 +23,14 @@ .contributors background-color: #237b46 !important .commits - background-color: #8f908f !important \ No newline at end of file + background-color: #8f908f !important + +@media (max-width: 767px) + #language_detail + overflow-x: auto + -webkit-overflow-scrolling: touch + width: 100% + table + min-width: 600px + width: max-content + display: table \ No newline at end of file diff --git a/app/assets/stylesheets/managed_projects_bootstrap_responsive.scss b/app/assets/stylesheets/managed_projects_bootstrap_responsive.scss new file mode 100644 index 000000000..a63f87471 --- /dev/null +++ b/app/assets/stylesheets/managed_projects_bootstrap_responsive.scss @@ -0,0 +1,105 @@ +// Managed Projects Responsive Layout using Bootstrap grid + +#managed_projects_list, #projects_index_list { + .well { + // Use Bootstrap's grid for main project block + @media (min-width: 768px) { + flex-wrap: wrap; + align-items: flex-start; + } + @media (max-width: 767px) { + display: block; + } + + h2.title { + @media (min-width: 768px) { + width: 100%; + display: block; + } + @media (max-width: 767px) { + width: 100%; + display: block; + float: none !important; + } + } + + #inner_content { + @media (min-width: 1200px) { + flex-wrap: nowrap; + width: 100%; + } + @media (min-width: 768px) and (max-width: 1199px) { + flex-wrap: wrap; + width: 100%; + } + @media (max-width: 767px) { + display: block; + width: 100%; + } + + .logo { + @media (min-width: 768px) { + flex: 0 0 64px; + max-width: 64px; + margin-right: 15px; + } + @media (max-width: 767px) { + display: block; + margin: 0 auto 10px; + text-align: center; + } + } + + .info, .stats, .reviews-and-pai { + @media (min-width: 1200px) { + flex: 1 1 0; + min-width: 0; + } + @media (min-width: 768px) and (max-width: 1199px) { + flex: 1 1 100%; + min-width: 0; + } + @media (max-width: 767px) { + display: block; + } + } + + .info { + @media (min-width: 1200px) { + margin-left: 10px; + width: 980px; + } + @media (max-width: 767px) { + margin: 0 0 10px 0; + } + + i { + float: right !important; + } + } + + .stats, .reviews-and-pai { + @media (min-width: 768px) { + margin-left: 10px; + } + } + } + + .add-info, .tags { + @media (max-width: 767px) { + width: 100%; + display: block; + margin-bottom: 10px; + } + } + + .licenses { + @media (max-width: 767px) { + text-align: left; + width: 100%; + display: block; + margin-bottom: 10px; + } + } + } +} diff --git a/app/assets/stylesheets/projects.sass b/app/assets/stylesheets/projects.sass index 2187fe1e3..00add13e5 100644 --- a/app/assets/stylesheets/projects.sass +++ b/app/assets/stylesheets/projects.sass @@ -61,10 +61,6 @@ $pai_levels: (('very_high',0), ('high', 1), ('moderate', 2), ('low', 3), ('very_ color: #fff .logo margin: 25px 20px 25px 0 - .info - width: 490px - i - float: right .claimed-by-org margin: 0 15px 0 10px .desc @@ -77,7 +73,6 @@ $pai_levels: (('very_high',0), ('high', 1), ('moderate', 2), ('low', 3), ('very_ span margin-left: 10px a - width: 80px text-align: right display: inline-block font-weight: bold @@ -105,8 +100,6 @@ $pai_levels: (('very_high',0), ('high', 1), ('moderate', 2), ('low', 3), ('very_ .add-info clear: left width: 574px - .main_language - margin-left: 85px a text-decoration: underline .tags diff --git a/app/assets/stylesheets/search-dingus.sass b/app/assets/stylesheets/search-dingus.sass index 421ac9d7f..2a37af620 100644 --- a/app/assets/stylesheets/search-dingus.sass +++ b/app/assets/stylesheets/search-dingus.sass @@ -98,3 +98,18 @@ font-size: 8px !important .global_top_search_icon font-size: 10px !important + +@media (max-width: 767px) + #search-dingus + #sort_chosen + width: 84px !important; + +@media (min-width: 1200px) + #search-dingus + #sort_chosen + width: auto !important; + +@media (min-width: 768px) and (max-width: 1199px) + #search-dingus + #sort_chosen + width: auto !important; \ No newline at end of file diff --git a/app/assets/stylesheets/streamgraph.sass b/app/assets/stylesheets/streamgraph.sass index d63de56a2..fd5046c0a 100644 --- a/app/assets/stylesheets/streamgraph.sass +++ b/app/assets/stylesheets/streamgraph.sass @@ -1,15 +1,12 @@ #ohloh_streamgraph &.languages height: 300px !important - #ohloh_stream - width: 940px !important - width: 715px + width: 940px height: 350px !important float: left - margin-left: 15px - margin-right: 10px + margin-left: 90px .highlight - stroke: #663300 + stroke: #777472ff stroke-width: 2px .x_axis path @@ -63,17 +60,15 @@ background: asset_url('charts/watermark_692.png') no-repeat center left @media only all and (min-width: 320px) and (max-width: 480px) #ohloh_streamgraph - &.languages - height: 150px !important #ohloh_stream - width: auto !important - width: auto !important + width: inherit !important + width: inherit !important #streamgraph_legend font-size: 13px !important @media (min-width: 540px) and (max-width: 1024px) #ohloh_streamgraph #ohloh_stream - width: auto !important - width: auto !important + width: inherit !important + width: inherit !important #streamgraph_legend margin-right: 48px \ No newline at end of file diff --git a/app/assets/stylesheets/streamgraph_responsive.sass b/app/assets/stylesheets/streamgraph_responsive.sass new file mode 100644 index 000000000..5aef6abd4 --- /dev/null +++ b/app/assets/stylesheets/streamgraph_responsive.sass @@ -0,0 +1,25 @@ +/* Language Graph Responsive Alignment */ + +/* Desktop view - Center the stream graph */ +@media (min-width: 1025px) + #ohloh_streamgraph + float: left !important + margin-left: 120px !important + margin-right: auto !important + display: block + .nomargin + margin-left: 120px !important + +/* Tablet and Mobile - Keep left alignment with title */ +@media (max-width: 1024px) + #ohloh_streamgraph + float: left + margin-left: 0 !important + margin-right: 0 + +/* Mobile specific adjustments */ +@media (max-width: 768px) + #ohloh_streamgraph + width: 100% !important + margin-left: 0 !important + float: none diff --git a/app/views/positions/_commits_by_individual_project_highchart.html.haml b/app/views/positions/_commits_by_individual_project_highchart.html.haml index 45a92d0bf..0b3db15d4 100644 --- a/app/views/positions/_commits_by_individual_project_highchart.html.haml +++ b/app/views/positions/_commits_by_individual_project_highchart.html.haml @@ -3,4 +3,4 @@ - chart_data = ChartDecorator.new.project_commit_history(@account, position.project_id) .margin_bottom_5 .chart-with-data{ id: "project_contributions_#{position.project_id}", 'data-value' => chart_data.as_json, - 'data-pname' => pname, style: 'width: 910px; height: 170px' } + 'data-pname' => pname, style: 'height: 170px' } diff --git a/app/views/positions/_commits_by_individual_projects.html.haml b/app/views/positions/_commits_by_individual_projects.html.haml index 8f46075ed..51b6729a1 100755 --- a/app/views/positions/_commits_by_individual_projects.html.haml +++ b/app/views/positions/_commits_by_individual_projects.html.haml @@ -1,4 +1,4 @@ -.col-xs-12.col-sm-12.col-md-6.position-item +.col-xs-12.col-sm-12.col-md-12.position-item %div{ class: position.decorate.analyzed_class_name } %div .col-xs-6.col-sm-6.col-md-6.one-project-header-left diff --git a/app/views/positions/_commits_by_projects_extended.html.haml b/app/views/positions/_commits_by_projects_extended.html.haml index f7c5490e6..69e0e7a9b 100755 --- a/app/views/positions/_commits_by_projects_extended.html.haml +++ b/app/views/positions/_commits_by_projects_extended.html.haml @@ -1,3 +1,3 @@ .padding_one_top - chart_data = ChartDecorator.new.combined_commit_history(@account) -.chart-with-data#all_projects{ 'data-value' => chart_data.as_json, style: 'width: 940px; height: 300px' } +.chart-with-data#all_projects{ 'data-value' => chart_data.as_json, style: 'height: 300px' } diff --git a/app/views/positions/index.html.haml b/app/views/positions/index.html.haml index 09a584858..cb1e3399d 100755 --- a/app/views/positions/index.html.haml +++ b/app/views/positions/index.html.haml @@ -13,7 +13,7 @@ #positions-index-page - if @account.positions.exists? = render 'commits_by_projects_extended' - .row.mezzo.padding_one_top + .mezzo.padding_one_top - @positions.each do |position| = render 'commits_by_individual_projects', position: position = will_paginate @positions From bc099671e8fde56b94793554d7eb581ee95e69ba Mon Sep 17 00:00:00 2001 From: Kumari Niharika Date: Wed, 19 Nov 2025 00:27:19 +0530 Subject: [PATCH 5/9] header fix --- app/assets/stylesheets/badges.sass | 3 +-- app/views/accounts/_mini_header.html.haml | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/badges.sass b/app/assets/stylesheets/badges.sass index c3da942b9..0935b8621 100644 --- a/app/assets/stylesheets/badges.sass +++ b/app/assets/stylesheets/badges.sass @@ -1,8 +1,7 @@ .mini-badges-section position: absolute - height: 62px top: 50% - right: 4px + left: 20px margin-top: -31px .describer-badge diff --git a/app/views/accounts/_mini_header.html.haml b/app/views/accounts/_mini_header.html.haml index 41e6ab280..aab43ef2b 100644 --- a/app/views/accounts/_mini_header.html.haml +++ b/app/views/accounts/_mini_header.html.haml @@ -12,7 +12,7 @@ .info.pull-left %h1{ itemprop: 'name' } = link_to h(@account.name), account_path(@account) - .col-xs-12.col-sm-12.col-md-12.pull-left.clearfix + .col-xs-8.col-sm-8.col-md-12.pull-left.clearfix - if @account.location.present? = @account.location %meta{ itemprop: 'homeLocation', content: @account.location } From 871ceee29ff8769e69a05d330cb13301918ad3aa Mon Sep 17 00:00:00 2001 From: Kumari Niharika Date: Wed, 19 Nov 2025 18:47:22 +0530 Subject: [PATCH 6/9] after review fix --- .../stylesheets/accounts/languages.sass | 10 -- app/assets/stylesheets/mobile_typography.scss | 78 ---------- app/assets/stylesheets/search-dingus.sass | 20 --- .../stylesheets/thickbox_responsive.scss | 137 +----------------- app/views/accounts/languages/index.html.haml | 7 +- 5 files changed, 11 insertions(+), 241 deletions(-) delete mode 100644 app/assets/stylesheets/mobile_typography.scss diff --git a/app/assets/stylesheets/accounts/languages.sass b/app/assets/stylesheets/accounts/languages.sass index cdbb71c3f..ddc7ed816 100644 --- a/app/assets/stylesheets/accounts/languages.sass +++ b/app/assets/stylesheets/accounts/languages.sass @@ -24,13 +24,3 @@ background-color: #237b46 !important .commits background-color: #8f908f !important - -@media (max-width: 767px) - #language_detail - overflow-x: auto - -webkit-overflow-scrolling: touch - width: 100% - table - min-width: 600px - width: max-content - display: table \ No newline at end of file diff --git a/app/assets/stylesheets/mobile_typography.scss b/app/assets/stylesheets/mobile_typography.scss deleted file mode 100644 index b961021a0..000000000 --- a/app/assets/stylesheets/mobile_typography.scss +++ /dev/null @@ -1,78 +0,0 @@ -/* Mobile-only smaller font size globally */ -@media screen and (max-width: 768px) { - body, p, div, span, td, th, li, a { - font-size: small !important; - } - - h1 { - font-size: 1.5rem !important; - } - - h2 { - font-size: 1.25rem !important; - } - - h3 { - font-size: 1.125rem !important; - } - - h4 { - font-size: 1rem !important; - } - - h5, h6 { - font-size: 0.875rem !important; - } - - .btn, button, input[type="submit"], input[type="button"] { - font-size: small !important; - } - - input, select, textarea { - font-size: small !important; - } - - .alert { - font-size: small !important; - } - - table { - font-size: small !important; - } - - label, .control-label { - font-size: small !important; - } - - .badge, .label { - font-size: small !important; - } - - .breadcrumb { - font-size: small !important; - } - - .pagination { - font-size: small !important; - } - - nav, .nav, .navbar { - font-size: small !important; - } - - .panel, .card { - font-size: small !important; - } - - .modal-body { - font-size: small !important; - } - - footer, .footer { - font-size: small !important; - } - - code, pre { - font-size: small !important; - } -} diff --git a/app/assets/stylesheets/search-dingus.sass b/app/assets/stylesheets/search-dingus.sass index 2a37af620..f9097b2a3 100644 --- a/app/assets/stylesheets/search-dingus.sass +++ b/app/assets/stylesheets/search-dingus.sass @@ -35,11 +35,6 @@ #enlistment_edits input width: 14px - .col-xs-3 - select - width: 70px - #enlistment_checkbox - margin-left: -18px #nav-top-bar form#quicksearch .caret @@ -98,18 +93,3 @@ font-size: 8px !important .global_top_search_icon font-size: 10px !important - -@media (max-width: 767px) - #search-dingus - #sort_chosen - width: 84px !important; - -@media (min-width: 1200px) - #search-dingus - #sort_chosen - width: auto !important; - -@media (min-width: 768px) and (max-width: 1199px) - #search-dingus - #sort_chosen - width: auto !important; \ No newline at end of file diff --git a/app/assets/stylesheets/thickbox_responsive.scss b/app/assets/stylesheets/thickbox_responsive.scss index fadb8e933..0d6265e84 100644 --- a/app/assets/stylesheets/thickbox_responsive.scss +++ b/app/assets/stylesheets/thickbox_responsive.scss @@ -27,81 +27,7 @@ max-height: 95vh; overflow: auto; } - -/* Tablet styles (769px to 1024px) - Keep desktop behavior */ -@media screen and (min-width: 769px) and (max-width: 1024px) { - #TB_window { - /* Keep original thickbox sizing for tablets */ - max-width: 90vw; - max-height: 90vh; - } - - #TB_Image { - max-width: 100% !important; - height: auto !important; - } -} - -/* Mobile phones only (max-width: 768px) */ -@media screen and (max-width: 768px) { - #TB_window { - width: 95% !important; - height: auto !important; - max-height: 90vh; - margin: 0 !important; - } - - /* Image display on mobile */ - #TB_Image { - max-width: 100% !important; - height: auto !important; - display: block; - margin: 0 auto; - } - - /* Caption styling - layout only */ - #TB_caption { - padding: 10px 15px; - line-height: 1.4; - } - - /* Navigation buttons - layout only */ - #TB_secondLine { - margin-top: 8px; - } - - #TB_prev, #TB_next { - display: inline-block; - padding: 5px 10px; - margin: 0 5px; - } - - /* Close button - layout only */ - #TB_closeWindow { - padding: 8px 15px; - text-align: center; - } - - #TB_closeWindowButton { - padding: 5px 15px; - text-decoration: none; - } -} - -/* Tablet styles */ -@media screen and (min-width: 769px) and (max-width: 1024px) { - #TB_window { - width: 80% !important; - max-width: 700px; - max-height: 85vh; - } - - #TB_Image { - max-width: 100% !important; - height: auto !important; - } -} - + /* Small mobile devices only (max-width: 480px) */ @media screen and (max-width: 480px) { #TB_window { @@ -115,20 +41,13 @@ #TB_prev, #TB_next { padding: 4px 8px; } - - #TB_closeWindow { - padding: 6px 10px; - } - - #TB_closeWindowButton { - padding: 4px 12px; - } -} -/* Ajax content responsive - mobile only */ -#TB_ajaxContent { - overflow: auto; - padding: 15px; + #TB_closeAjaxWindow { + padding: 7px 0 5px 10px; + margin-bottom: 1px; + text-align: right; + float: right; + } } @media screen and (max-width: 768px) { @@ -157,35 +76,6 @@ } } -/* Title bar responsive - mobile only */ -#TB_title { - height: auto !important; - padding: 10px 15px; -} - -@media screen and (max-width: 768px) { - #TB_title { - padding: 8px 10px; - } -} - -#TB_ajaxWindowTitle { - margin-bottom: 0; -} - -/* Close button in title - mobile only */ -#TB_closeAjaxWindow { - text-align: right; - margin-top: 5px; -} - -@media screen and (max-width: 768px) { - #TB_closeAjaxWindow { - text-align: center; - margin-top: 8px; - } -} - /* Loading animation - layout only */ #TB_load { position: fixed !important; @@ -209,19 +99,6 @@ } } -/* Touch-friendly improvements - mobile only */ -@media screen and (max-width: 768px) and (hover: none) and (pointer: coarse) { - #TB_closeWindowButton, - #TB_prev a, - #TB_next a { - min-height: 44px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 10px 15px; - } -} - /* Mobile scroll and touch optimization */ @media screen and (max-width: 768px) { #TB_overlay { diff --git a/app/views/accounts/languages/index.html.haml b/app/views/accounts/languages/index.html.haml index 5b7d8a06e..fd175ce6e 100644 --- a/app/views/accounts/languages/index.html.haml +++ b/app/views/accounts/languages/index.html.haml @@ -8,9 +8,10 @@ = render partial: 'accounts/languages/commits_by_language' - if @vlfs.present? .col-xs-12.col-sm-12.col-md-12#language_detail - %table.table.table-striped.table-condensed - %thead= render partial: 'contributions/language_header' - %tbody= render partial: 'contributions/language_fact', collection: @vlfs + .table-responsive + %table.table.table-striped.table-condensed + %thead= render partial: 'contributions/language_header' + %tbody= render partial: 'contributions/language_fact', collection: @vlfs - else %h2= t('accounts.languages.index.title') .col-xs-12.col-sm-12.col-md-12 From 5bfd9f4f1467b38f3cf8ed9fa4ee622bf05eca08 Mon Sep 17 00:00:00 2001 From: Priya Rani Date: Wed, 19 Nov 2025 19:30:13 +0530 Subject: [PATCH 7/9] Fix account language graph UI --- app/assets/javascripts/steamgraph.js | 2 +- app/assets/stylesheets/streamgraph.sass | 16 ++++++------ .../stylesheets/streamgraph_responsive.sass | 25 ------------------- 3 files changed, 10 insertions(+), 33 deletions(-) delete mode 100644 app/assets/stylesheets/streamgraph_responsive.sass diff --git a/app/assets/javascripts/steamgraph.js b/app/assets/javascripts/steamgraph.js index 108b470e1..e4a5b8377 100644 --- a/app/assets/javascripts/steamgraph.js +++ b/app/assets/javascripts/steamgraph.js @@ -90,7 +90,7 @@ Streamgraph = { else if (window.innerWidth >= 768 && window.innerWidth <= 1024) {var width = 515; var height = 300; var transform_new = 0;} else - {var width = 715; var height = 300; var transform_new = 0;} + {var width = 1024; var height = 300; var transform_new = 0;} var margin = {top: 0, right: 0, bottom: 0, left: 0}; var width = width - margin.left - margin.right diff --git a/app/assets/stylesheets/streamgraph.sass b/app/assets/stylesheets/streamgraph.sass index fd5046c0a..8a19a0cc7 100644 --- a/app/assets/stylesheets/streamgraph.sass +++ b/app/assets/stylesheets/streamgraph.sass @@ -6,7 +6,7 @@ float: left margin-left: 90px .highlight - stroke: #777472ff + stroke: #663300 stroke-width: 2px .x_axis path @@ -60,15 +60,17 @@ background: asset_url('charts/watermark_692.png') no-repeat center left @media only all and (min-width: 320px) and (max-width: 480px) #ohloh_streamgraph + margin-left: 0 #ohloh_stream - width: inherit !important - width: inherit !important + width: auto !important + width: auto !important #streamgraph_legend font-size: 13px !important @media (min-width: 540px) and (max-width: 1024px) #ohloh_streamgraph #ohloh_stream - width: inherit !important - width: inherit !important - #streamgraph_legend - margin-right: 48px \ No newline at end of file + width: auto !important + width: auto !important +@media (min-width: 700px) and (max-width: 800px) + #ohloh_streamgraph + margin-left: 0 \ No newline at end of file diff --git a/app/assets/stylesheets/streamgraph_responsive.sass b/app/assets/stylesheets/streamgraph_responsive.sass deleted file mode 100644 index 5aef6abd4..000000000 --- a/app/assets/stylesheets/streamgraph_responsive.sass +++ /dev/null @@ -1,25 +0,0 @@ -/* Language Graph Responsive Alignment */ - -/* Desktop view - Center the stream graph */ -@media (min-width: 1025px) - #ohloh_streamgraph - float: left !important - margin-left: 120px !important - margin-right: auto !important - display: block - .nomargin - margin-left: 120px !important - -/* Tablet and Mobile - Keep left alignment with title */ -@media (max-width: 1024px) - #ohloh_streamgraph - float: left - margin-left: 0 !important - margin-right: 0 - -/* Mobile specific adjustments */ -@media (max-width: 768px) - #ohloh_streamgraph - width: 100% !important - margin-left: 0 !important - float: none From c1df284b842c995271f1ff3119a35c31fa31ffec Mon Sep 17 00:00:00 2001 From: Kumari Niharika Date: Fri, 28 Nov 2025 12:26:44 +0530 Subject: [PATCH 8/9] OTWO-7469 compare projects UI changes --- app/assets/stylesheets/static_forms.sass | 3 + app/views/compares/_project_row.html.haml | 2 +- app/views/compares/projects.html.haml | 73 ++++++++++++----------- app/views/languages/compare.html.haml | 2 +- app/views/projects/check_forge.html.haml | 8 +-- app/views/projects/new.html.haml | 4 +- 6 files changed, 48 insertions(+), 44 deletions(-) diff --git a/app/assets/stylesheets/static_forms.sass b/app/assets/stylesheets/static_forms.sass index 3c5734cd8..74ca0e664 100644 --- a/app/assets/stylesheets/static_forms.sass +++ b/app/assets/stylesheets/static_forms.sass @@ -326,6 +326,9 @@ input.span10, textarea.span10, .uneditable-input.span10 input.span9, textarea.span9, .uneditable-input.span9 width: 686px +input.new_project_input.span9 + width: 100% + input.span8, textarea.span8, .uneditable-input.span8 width: 606px diff --git a/app/views/compares/_project_row.html.haml b/app/views/compares/_project_row.html.haml index 89e2a43d8..ef88bd63b 100644 --- a/app/views/compares/_project_row.html.haml +++ b/app/views/compares/_project_row.html.haml @@ -21,7 +21,7 @@ .panel-body #chartContainer - @projects.each do |project| - %td.col-md-3{ valign: 'top', style: 'padding-top: 5px;' } + %td.col-xs-3.col-sm-3.col-md-3{ valign: 'top', style: 'padding-top: 5px;' } - if project != render partial: "compares/project_cells/#{cell}", locals: { project: project } - else diff --git a/app/views/compares/projects.html.haml b/app/views/compares/projects.html.haml index 250c87c48..4176c1a9a 100644 --- a/app/views/compares/projects.html.haml +++ b/app/views/compares/projects.html.haml @@ -13,42 +13,43 @@ .margin_left_10 .projects_compare - %table.side_by_side - = compare_section t('.general'), class: 'first', include_header: true - = compare_row t('.compare_table_activity_level'), :activity_level - = compare_row t('.compare_table_data_quality'), :data_quality - = compare_row t('.compare_table_homepage'), :homepage - = compare_row t('.compare_table_license'), :license - = compare_row t('.compare_table_cocomo'), :cocomo, help: :project_codebase_cost - = compare_section t('.all_time_statistics') - = compare_row t('.compare_table_committers_all_time'), :committers_all_time, - graph: proj_names.merge(metric: 'contributor') - = compare_row t('.compare_table_commit_count'), :commit_count, - graph: proj_names.merge(metric: 'commit') - = compare_row t('.compare_table_initial_commit'), :initial_commit - = compare_row t('.compare_table_most_recent_commit'), :most_recent_commit + .table-responsive + %table.side_by_side + = compare_section t('.general'), class: 'first', include_header: true + = compare_row t('.compare_table_activity_level'), :activity_level + = compare_row t('.compare_table_data_quality'), :data_quality + = compare_row t('.compare_table_homepage'), :homepage + = compare_row t('.compare_table_license'), :license + = compare_row t('.compare_table_cocomo'), :cocomo, help: :project_codebase_cost + = compare_section t('.all_time_statistics') + = compare_row t('.compare_table_committers_all_time'), :committers_all_time, + graph: proj_names.merge(metric: 'contributor') + = compare_row t('.compare_table_commit_count'), :commit_count, + graph: proj_names.merge(metric: 'commit') + = compare_row t('.compare_table_initial_commit'), :initial_commit + = compare_row t('.compare_table_most_recent_commit'), :most_recent_commit - = compare_section t('.twelve_month_statistics') - = compare_row t('.compare_table_twelve_months_committers'), :twelve_months_committers - = compare_row t('.compare_table_twelve_months_commits'), :twelve_months_commits - = compare_row t('.compare_table_twelve_months_files_modified'), :twelve_months_files_modified - = compare_row t('.compare_table_twelve_months_lines_added'), :twelve_months_lines_added - = compare_row t('.compare_table_twelve_months_lines_removed'), :twelve_months_lines_removed - = compare_row t('.compare_table_year_over_year_commits'), :year_over_year_commits + = compare_section t('.twelve_month_statistics') + = compare_row t('.compare_table_twelve_months_committers'), :twelve_months_committers + = compare_row t('.compare_table_twelve_months_commits'), :twelve_months_commits + = compare_row t('.compare_table_twelve_months_files_modified'), :twelve_months_files_modified + = compare_row t('.compare_table_twelve_months_lines_added'), :twelve_months_lines_added + = compare_row t('.compare_table_twelve_months_lines_removed'), :twelve_months_lines_removed + = compare_row t('.compare_table_year_over_year_commits'), :year_over_year_commits - = compare_section t('.thirty_day_statistics') - = compare_row t('.compare_table_thirty_day_committers'), :thirty_day_committers - = compare_row t('.compare_table_thirty_day_commits'), :thirty_day_commits - = compare_row t('.compare_table_thirty_day_files_modified'), :thirty_day_files_modified - = compare_row t('.compare_table_thirty_day_lines_added'), :thirty_day_lines_added - = compare_row t('.compare_table_thirty_day_lines_removed'), :thirty_day_lines_removed + = compare_section t('.thirty_day_statistics') + = compare_row t('.compare_table_thirty_day_committers'), :thirty_day_committers + = compare_row t('.compare_table_thirty_day_commits'), :thirty_day_commits + = compare_row t('.compare_table_thirty_day_files_modified'), :thirty_day_files_modified + = compare_row t('.compare_table_thirty_day_lines_added'), :thirty_day_lines_added + = compare_row t('.compare_table_thirty_day_lines_removed'), :thirty_day_lines_removed - = compare_section t('.code_analysis') - = compare_row t('.compare_table_mostly_written_in'), :mostly_written_in, help: :mostly_written - = compare_row t('.compare_table_comments'), :comments - = compare_row t('.compare_table_lines_of_code'), :lines_of_code, - graph: proj_names.merge(metric: 'code_total') - = compare_section t('.people') - = compare_row t('.compare_table_managers'), :managers - = compare_row t('.compare_table_users'), :users - = compare_row t('.compare_table_rating'), :rating + = compare_section t('.code_analysis') + = compare_row t('.compare_table_mostly_written_in'), :mostly_written_in, help: :mostly_written + = compare_row t('.compare_table_comments'), :comments + = compare_row t('.compare_table_lines_of_code'), :lines_of_code, + graph: proj_names.merge(metric: 'code_total') + = compare_section t('.people') + = compare_row t('.compare_table_managers'), :managers + = compare_row t('.compare_table_users'), :users + = compare_row t('.compare_table_rating'), :rating diff --git a/app/views/languages/compare.html.haml b/app/views/languages/compare.html.haml index 1629ac9c0..74293a10a 100644 --- a/app/views/languages/compare.html.haml +++ b/app/views/languages/compare.html.haml @@ -16,7 +16,7 @@ = hidden_field_tag :measure, @measure .col-md-8 .chart.watermark440#language{ datasrc: chart_languages_path(measure: @measure, language_name: @language_names), - style: 'height: 270px;width: 480px' } + style: 'height: 270px;' } .col-md-4 - @language_names.each do |name| .col-md-3{ style: "height: 28px;background-color: ##{language_color(name)}" } diff --git a/app/views/projects/check_forge.html.haml b/app/views/projects/check_forge.html.haml index 09b945b9c..5df63bec0 100644 --- a/app/views/projects/check_forge.html.haml +++ b/app/views/projects/check_forge.html.haml @@ -5,7 +5,7 @@ %h1.margin_bottom_20= t('projects.new.call_to_action') .row - .col-md-12 + .col-xs-12.col-sm-12.col-md-12 %div{ style: 'padding: 0 15px;' } .well = form_for @project, as: :project, url: projects_path, html: { class: 'styled new_project' } do |f| @@ -14,7 +14,7 @@ .control-group.nomargin %label.control-label.required= t('.project_name') .controls - %input.col-md-5#project_name{ name: 'project[name]', type: 'text', value: @project.name } + %input.col-xs-10.col-md-5#project_name{ name: 'project[name]', type: 'text', value: @project.name } - error_tag @project, :name %p.help-block!= t('.project_name_help', link: link_to(t('.contact_us'), blog_url_for(:contact_form))) .control-group.nomargin @@ -80,7 +80,7 @@ .input-prepend %span.add-on= 'http://www.openhub.net/p/' = f.text_field :vanity_url, class: 'check-availability', autocomplete: 'off', - style: 'width: 188px;', + style: 'width: auto;', 'data-original-value' => Project.find_by(id: @project).try(:vanity_url), 'data-ajax-path' => project_check_availabilities_path, 'data-preview-base-url' => projects_url @@ -93,7 +93,7 @@ .control-group %label.control-label= t('.description') .controls - = find_and_preserve(f.text_area(:description, max_length: 800, style: 'width: 376px; height: 200px;')) + = find_and_preserve(f.text_area(:description, max_length: 800, style: 'width: auto; height: 200px;')) - error_tag @project, :description %p.help-block = t('.description_help1') diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml index 18849d4a0..10cad8d28 100644 --- a/app/views/projects/new.html.haml +++ b/app/views/projects/new.html.haml @@ -12,8 +12,8 @@ %p= t('.help2') .col-md-9 %label= t('.codelocation_label') - .col-md-9 - %input.span9.field{ name: 'codelocation', type: 'text' } + .col-xs-11.col-md-9 + %input.new_project_input.span9.field{ name: 'codelocation', type: 'text' } .col-md-9 = t('.examples') .inset From 66d980f76cc348ec308f12444f374877b185e1e5 Mon Sep 17 00:00:00 2001 From: Kumari Niharika Date: Tue, 2 Dec 2025 14:37:10 +0530 Subject: [PATCH 9/9] review changes after the fix --- app/assets/stylesheets/badges.sass | 1 - app/views/api_keys/_api_key.html.haml | 2 +- app/views/api_keys/_form.html.haml | 12 ++++++------ app/views/projects/check_forge.html.haml | 12 ++++++------ 4 files changed, 13 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/badges.sass b/app/assets/stylesheets/badges.sass index 0935b8621..d078b274f 100644 --- a/app/assets/stylesheets/badges.sass +++ b/app/assets/stylesheets/badges.sass @@ -101,7 +101,6 @@ .account_header .mini-badges-section margin: 0 0 15px - display: flex float: none .account-badge margin: 0 20px 20px 0 diff --git a/app/views/api_keys/_api_key.html.haml b/app/views/api_keys/_api_key.html.haml index a07d73c4d..0f9f0f232 100644 --- a/app/views/api_keys/_api_key.html.haml +++ b/app/views/api_keys/_api_key.html.haml @@ -1,5 +1,5 @@ - oauth_application = api_key.oauth_application || Doorkeeper::Application.new -.well.col-md-12 +.well.col-md-12.col-sm-12.col-xs-12 .padding_20 %h5.pull-right.timestamp %i.icon-time   diff --git a/app/views/api_keys/_form.html.haml b/app/views/api_keys/_form.html.haml index 9e9624040..9346482a6 100644 --- a/app/views/api_keys/_form.html.haml +++ b/app/views/api_keys/_form.html.haml @@ -10,35 +10,35 @@ %h2! #{settings_link} : #{account_api_keys_link} : #{@api_key.new_record? ? t(:new) : t(:edit)} = form_for [@account, @api_key] do |f| - .col-md-11.center-block.well.margin_left_20.padding_right_0 + .col-md-11.col-sm-11.col-xs-11.center-block.well.margin_left_20.padding_right_0 %fieldset - @api_key.oauth_application || @api_key.build_oauth_application = f.fields_for :oauth_application do |ff| .control-group %label.control-label.required= t 'api_keys.form.application_name' .controls - = ff.text_field :name, max_length: 50, class: 'col-md-7' + = ff.text_field :name, max_length: 50, class: 'col-md-7 col-sm-10 col-xs-10' - error_tag @api_key.oauth_application, :name .clearfix   .control-group %label.control-label.required= t 'api_keys.redirect_uri' .controls - = ff.text_field :redirect_uri, max_length: 50, class: 'col-md-7' + = ff.text_field :redirect_uri, max_length: 50, class: 'col-md-7 col-sm-10 col-xs-10' - error_tag @api_key.oauth_application, :redirect_uri .clearfix   .control-group %label.control-label= t 'api_keys.form.home_page_url' .controls - = f.text_field :url, max_length: 50, class: 'col-md-7' + = f.text_field :url, max_length: 50, class: 'col-md-7 col-sm-10 col-xs-10' - error_tag @api_key, :url %p.help-block= t 'api_keys.form.home_page_url_info' .control-group %label.control-label.required= t 'api_keys.form.description' .controls - = f.text_area :description, rows: 10, max_length: 2000, class: 'col-md-7' + = f.text_area :description, rows: 10, max_length: 2000, class: 'col-md-7 col-sm-10 col-xs-10' - error_tag @api_key, :description .clearfix   %p.help-block= t 'api_keys.form.description_info' @@ -47,7 +47,7 @@ .control-group %label.control-label= t 'api_keys.form.daily_request_limit' .controls - = f.text_field :daily_limit, max_length: 10, class: 'col-md-4' + = f.text_field :daily_limit, max_length: 10, class: 'col-md-4 col-sm-8 col-xs-10' - error_tag @api_key, :daily_limit .clearfix %p.help-block= t 'api_keys.form.daily_request_limit_admin' diff --git a/app/views/projects/check_forge.html.haml b/app/views/projects/check_forge.html.haml index 5df63bec0..f343f8b5a 100644 --- a/app/views/projects/check_forge.html.haml +++ b/app/views/projects/check_forge.html.haml @@ -14,7 +14,7 @@ .control-group.nomargin %label.control-label.required= t('.project_name') .controls - %input.col-xs-10.col-md-5#project_name{ name: 'project[name]', type: 'text', value: @project.name } + %input.col-xs-10.col-sm-11.col-md-5#project_name{ name: 'project[name]', type: 'text', value: @project.name } - error_tag @project, :name %p.help-block!= t('.project_name_help', link: link_to(t('.contact_us'), blog_url_for(:contact_form))) .control-group.nomargin @@ -36,7 +36,7 @@ .control-group .controls %label.checkbox.control-label{ style: 'padding: 0;' } - = f.check_box :managed_by_creator, choice: t('.i_manage_this_project'), class: 'col' + = f.check_box :managed_by_creator, choice: t('.i_manage_this_project'), class: 'col', style: 'margin: 4px 0 0 -20px' = t('.i_manage_this_project') %p.help-block = t('.i_manage_this_project_help1') @@ -45,19 +45,19 @@ .control-group %label.control-label= t('.homepage_page') .controls - = f.text_field :url, class: 'col-md-5' + = f.text_field :url, class: 'col-md-5 col-sm-11 col-xs-10' - error_tag @project, :url %p.help-block= t('.homepage_page_help') .control-group %label.control-label= t('.download_page') .controls - = f.text_field :download_url, class: 'col-md-5' + = f.text_field :download_url, class: 'col-md-5 col-sm-11 col-xs-10' - error_tag @project, :download_url %p.help-block= t('.download_page_help') .control-group %label.control-label= t('.add_license') .controls - %input.license.col-md-5#add_license{ type: 'text' } + %input.license.col-md-5.col-sm-11.col-xs-10#add_license{ type: 'text' } %p.help-block = t('.add_license_help1') %br @@ -93,7 +93,7 @@ .control-group %label.control-label= t('.description') .controls - = find_and_preserve(f.text_area(:description, max_length: 800, style: 'width: auto; height: 200px;')) + = find_and_preserve(f.text_area(:description, max_length: 800, style: 'width: 345px; height: 200px;')) - error_tag @project, :description %p.help-block = t('.description_help1')