claude/fix-page-width-layout-SY7c5 (#679)

* Fix horizontal overflow causing page content to be cut off on mobile

- Add overflow-x: hidden to html/body and ng-view to prevent horizontal
  scrolling across all pages
- Restore .container.page mobile padding to 15px to match Bootstrap .row
  negative margins (-15px), which previously caused 5px overflow per side
- Add max-width: 100% constraints to prevent content from exceeding viewport

https://claude.ai/code/session_01L2xhJCKkjghMDBuwXpSHzi

* Fix Ko-fi widget overlapping hamburger menu and simplify desktop layout

- Move Ko-fi "Support me" button from top-right (where it hid the navbar
  hamburger) to bottom-right corner
- Remove card styling (border, background, border-radius) from dashboard
  quota section for a flatter, cleaner look
- Remove fixed max-width: 960px from dashboard-page so it uses Bootstrap's
  standard container widths, consistent with other pages like admin

https://claude.ai/code/session_01L2xhJCKkjghMDBuwXpSHzi

* Redesign anonymize page: centered landing, reorganized form layout

- No URL state: centered input in the middle of the page for a clean
  initial experience
- URL provided state: preview on the left, form settings on the right
  in a fixed-width sidebar panel (380px on desktop)
- Reorganized form sections into logical groups:
  Source (branch/commit) → Identity (ID/conference) → Anonymization
  (terms) → Display (checkboxes, no longer hidden in accordion) →
  Expiration
- Removed card/accordion wrappers for a flatter, more scannable form
- Mobile: form stacks below preview with sticky submit bar

https://claude.ai/code/session_01L2xhJCKkjghMDBuwXpSHzi

* Reduce navbar height on desktop

- Reduce navbar padding from default .5rem to 4px vertical
- Shrink nav icons from 30px/40px to 20px/28px
- Reduce nav-link font size to 0.9rem with tighter padding
- Shrink navbar-brand font size to 1rem

https://claude.ai/code/session_01L2xhJCKkjghMDBuwXpSHzi

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas DurieuxandClaude authored and GitHub committed 2026-04-15 11:13:05 +02:00
1 parent 12d72bdc1a
commit 3f32ec5ca1
3 files changed
+305 -293

No files matched your search

+1 -1
View File
@@ -6,4 +6,4 @@
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unsLine truncated
* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/.fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{contentLine truncated
*/.fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{contentLine truncated
+77 -70
View File
@@ -126,6 +126,14 @@ html,
body {
position: relative;
height: 100%;
overflow-x: hidden;
}
/* Prevent ng-view from scrolling horizontally */
[ng-view] {
overflow-x: hidden !important;
overflow-y: auto !important;
max-width: 100%;
}
.dropdown-menu a,
@@ -149,11 +157,15 @@ a:hover {
.navbar {
background: var(--header-bg-color) !important;
}
.navbar {
font-weight: 300;
transition: background-color 0.5s ease;
padding: 4px 1rem;
}
.navbar .nav-link {
font-size: 0.9rem;
padding-top: 6px;
padding-bottom: 6px;
}
.navbar .nav-link.nav-icon {
@@ -162,18 +174,14 @@ a:hover {
.navbar .nav-link .fa,
.navbar .nav-link .fab {
font-size: 30px;
line-height: 40px;
}
@media (min-width: 768px) {
.navbar-brand {
width: 280px;
}
font-size: 20px;
line-height: 28px;
}
.navbar-brand {
text-align: center;
font-size: 1rem;
padding: 4px 0;
}
#navbarSupportedContent {
@@ -542,17 +550,17 @@ notebook {
}
.floatingchat-container-wrap {
left: inherit !important;
bottom: inherit !important;
top: 3px !important;
left: auto !important;
top: auto !important;
bottom: 3px !important;
height: 47px !important;
right: 3px !important;
}
.floating-chat-kofi-popup-iframe {
left: inherit !important;
bottom: inherit !important;
top: 55px !important;
left: auto !important;
top: auto !important;
bottom: 55px !important;
right: 10px !important;
}
@@ -705,10 +713,6 @@ code {
/* ===== Dashboard & List Styles ===== */
.dashboard-page {
max-width: 960px;
}
.dashboard-title {
font-size: 1.4rem;
font-weight: 600;
@@ -720,10 +724,7 @@ code {
display: flex;
gap: 16px;
margin-bottom: 16px;
padding: 12px 16px;
background: var(--admin-stat-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0;
}
.quota-item {
@@ -935,20 +936,45 @@ code {
/* ===== Anonymize Page Layout ===== */
.anonymize-page .sidePanel {
/* Landing state: centered URL input */
.anonymize-landing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 20px;
}
.anonymize-landing-inner {
width: 100%;
max-width: 600px;
}
.anonymize-landing-inner h2 {
font-weight: 700;
}
/* Form column (right side when URL is provided) */
.anonymize-form-col {
flex: 0 0 auto;
width: 100%;
min-width: 0;
background: var(--sidebar-bg-color);
border-left: 1px solid var(--border-color);
}
.anonymize-section-title {
font-size: 1rem;
font-size: 0.85rem;
font-weight: 600;
margin: 16px 0 10px 0;
text-transform: uppercase;
letter-spacing: 0.3px;
margin: 18px 0 8px 0;
padding-bottom: 6px;
border-bottom: 2px solid var(--primary-bg);
border-bottom: 1px solid var(--border-color);
opacity: 0.7;
}
.anonymize-section-title i {
color: var(--primary-bg);
margin-right: 4px;
}
@@ -971,18 +997,10 @@ code {
font-weight: 500;
}
.anonymize-page .accordion .card-header {
padding: 0;
}
.anonymize-page .accordion .btn {
font-weight: 600;
font-size: 0.95rem;
}
/* Preview column on desktop */
.anonymize-preview-col {
min-height: 0;
min-width: 0;
}
/* PR diff overflow */
@@ -994,11 +1012,13 @@ code {
@media (min-width: 768px) {
.anonymize-form-col {
height: 100%;
max-width: 50%;
width: 380px;
flex: 0 0 380px;
}
.anonymize-preview-col {
height: 100%;
flex: 1;
}
}
@@ -1028,8 +1048,9 @@ code {
}
.container.page {
padding-left: 10px;
padding-right: 10px;
padding-left: 15px;
padding-right: 15px;
max-width: 100%;
}
h1 { font-size: 1.6rem; }
@@ -1143,40 +1164,30 @@ code {
/* ---- Anonymize page mobile ---- */
.anonymize-page > .row {
.anonymize-landing {
align-items: flex-start;
padding-top: 60px;
}
.anonymize-page .container-fluid > .row {
height: auto !important;
min-height: 100%;
}
.anonymize-page .sidePanel {
height: auto !important;
overflow: visible !important;
border-bottom: 2px solid var(--border-color);
padding-bottom: 12px;
}
.anonymize-page .sidePanel .card,
.anonymize-page .sidePanel .container {
max-width: 100%;
padding-left: 8px;
padding-right: 8px;
}
.anonymize-form-col {
max-width: 100% !important;
flex: 0 0 100%;
width: 100%;
width: 100% !important;
flex: 0 0 100% !important;
border-left: none;
border-top: 1px solid var(--border-color);
}
.anonymize-preview-col {
height: auto !important;
max-height: none;
border-top: 1px solid var(--border-color);
padding-top: 12px !important;
}
.anonymize-section-title {
font-size: 0.95rem;
font-size: 0.8rem;
margin: 12px 0 8px 0;
}
@@ -1185,9 +1196,9 @@ code {
bottom: 0;
background: var(--sidebar-bg-color);
padding: 10px 0;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
margin: 0 -12px;
padding-left: 12px;
padding-right: 12px;
border-top: 1px solid var(--border-color);
z-index: 10;
}
@@ -1197,10 +1208,6 @@ code {
padding: 12px 20px;
}
.anonymize-page .card-title {
font-size: 1.2rem;
}
/* Compact checkboxes on mobile */
.anonymize-page .form-check {
padding-top: 6px;
+227 -222
View File
@@ -1,11 +1,86 @@
<div class="container-fluid h-100 anonymize-page">
<div class="row h-100 flex-column flex-md-row">
<div class="col-md sidePanel shadow overflow-auto anonymize-form-col">
<div class="p-0 py-2 m-auto" ng-class="{'card': !sourceUrl, 'container': sourceUrl}">
<form class="form needs-validation" ng-class="{'card-body': !sourceUrl}" name="anonymize" novalidate>
<h3 class="card-title mb-3">Anonymize</h3>
<div class="anonymize-page h-100">
<!-- ===== STATE 1: No URL — centered input ===== -->
<div class="anonymize-landing" ng-hide="sourceUrl">
<div class="anonymize-landing-inner">
<h2 class="mb-3">Anonymize</h2>
<div class="form-group mb-2">
<input
type="text"
class="form-control form-control-lg"
ng-model="sourceUrl"
placeholder="Paste a GitHub repo or pull request URL"
ng-model-options="{ debounce: {default: 1000, blur: 0, click: 0}, updateOn: 'default blur click' }"
ng-change="urlSelected()"
/>
</div>
<small class="form-text text-muted">
Paste a repository URL to anonymize a repo, or a pull request URL to anonymize a PR.
</small>
</div>
</div>
<!-- Source URL (auto-detects repo vs PR) -->
<!-- ===== STATE 2: URL provided — preview (left) + form (right) ===== -->
<div class="container-fluid h-100" ng-show="sourceUrl">
<div class="row h-100 flex-column flex-md-row">
<!-- Preview column (left on desktop) -->
<div
class="col-md p-2 overflow-auto markdown-body body anonymize-preview-col"
ng-bind-html="html_readme"
ng-if="detectedType === 'repo' && html_readme"
></div>
<div class="col-md p-2 overflow-auto anonymize-preview-col" ng-if="detectedType === 'pr' && details">
<div class="d-flex w-100 justify-content-between align-items-center flex-wrap">
<h2 class="pr-title mb-1">
<span ng-if="options.title">{{anonymizePrContent(details.pullRequest.title)}}</span>
<span class="badge" ng-class="{'badge-success':details.pullRequest.merged, 'badge-warning':details.pullRequest.state=='open', 'badge-danger':details.pullRequest.state=='closed' && !details.pullRequest.merged}">
{{details.pullRequest.merged ? "merged" : details.pullRequest.state | title}}
</span>
</h2>
<small ng-bind="details.pullRequest.updatedDate | date" ng-if="options.date"></small>
</div>
<small ng-if="options.origin">Pull Request on {{details.pullRequest.baseRepositoryFullName}}</small>
<div class="pr-body shadow-sm p-3 mb-4 rounded" style="background: var(--sidebar-bg-color)" ng-if="options.body">
<markdown content="anonymizePrContent(details.pullRequest.body)" options="options" terms="terms"></markdown>
</div>
<ul class="nav nav-tabs" id="prTabs" role="tablist">
<li class="nav-item" role="presentation" ng-if="options.diff">
<button class="nav-link active" id="pills-diff-tab" data-toggle="pill" data-target="#pills-diff" type="button" role="tab">Diff</button>
</li>
<li class="nav-item" role="presentation" ng-if="options.comments">
<button class="nav-link" ng-class="{'active':!options.diff}" id="pills-comments-tab" data-toggle="pill" data-target="#pills-comments" type="button" role="tab">
<ng-pluralize count="details.pullRequest.comments.length" when="{'0': 'No comment', 'one': 'One Comment', 'other': '{} Comments'}"></ng-pluralize>
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane show active" id="pills-diff" role="tabpanel" ng-if="options.diff">
<div class="pr-diff shadow-sm p-3 mb-4 rounded" style="background: var(--sidebar-bg-color)">
<pre style="overflow-x: auto"><code ng-bind-html="anonymizePrContent(details.pullRequest.diff) | diff"></code></pre>
</div>
</div>
<div class="tab-pane" ng-class="{'show active':!options.diff}" id="pills-comments" role="tabpanel" ng-if="options.comments">
<ul class="pr-comments list-group">
<li class="pr-comment list-group-item" ng-repeat="comment in details.pullRequest.comments">
<div class="d-flex w-100 justify-content-between flex-wrap">
<h5 class="mb-1" ng-if="options.username">@{{anonymizePrContent(comment.author)}}</h5>
<small ng-bind="comment.updatedDate | date" ng-if="options.date"></small>
</div>
<p class="mb-1">
<markdown class="pr-comment-body" ng-if="options.body" content="anonymizePrContent(comment.body)" options="options" terms="terms"></markdown>
</p>
</li>
</ul>
</div>
</div>
</div>
<!-- Form column (right on desktop) -->
<div class="anonymize-form-col overflow-auto">
<form class="form needs-validation p-3" name="anonymize" novalidate>
<!-- Source URL -->
<div class="form-group mb-2">
<input
type="text"
@@ -19,7 +94,7 @@
ng-change="urlSelected()"
/>
<div class="invalid-feedback" ng-show="anonymize.sourceUrl.$error.github">
Please provide a valid GitHub URL, e.g., https://github.com/owner/repo or https://github.com/owner/repo/pull/123
Please provide a valid GitHub URL.
</div>
<div class="invalid-feedback" ng-show="anonymize.sourceUrl.$error.access">
Not accessible. The organization may restrict access.
@@ -30,49 +105,36 @@
<div class="invalid-feedback" ng-show="anonymize.sourceUrl.$error.used">
Already anonymized.
</div>
<small class="form-text text-muted" ng-hide="sourceUrl">
Paste a repository URL to anonymize a repo, or a pull request URL to anonymize a PR.
</small>
</div>
<!-- Type indicator -->
<div class="mb-3" ng-show="detectedType && sourceUrl">
<div class="mb-2" ng-show="detectedType">
<span class="type-badge" ng-class="{'type-repo': detectedType === 'repo', 'type-pr': detectedType === 'pr'}">
<i ng-class="{'fas fa-code-branch': detectedType === 'repo', 'fas fa-code-merge': detectedType === 'pr'}"></i>
{{detectedType === 'repo' ? 'Repository' : 'Pull Request'}}
</span>
</div>
<div ng-show="sourceUrl">
<!-- ==== REPO-SPECIFIC FIELDS ==== -->
<div ng-show="detectedType === 'repo'">
<div class="form-group">
<label for="branch">Branch</label>
<div class="input-group mb-1">
<select class="form-control" id="branch" name="branch" ng-model="source.branch">
<option ng-repeat="b in branches" ng-bind="b.name" value="{{b.name}}"></option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" ng-click="getBranches(true)" title="Refresh" data-toggle="tooltip" data-placement="bottom">
<i class="fa fa-undo"></i>
</button>
</div>
</div>
<small class="form-text text-muted">The branch to anonymize</small>
</div>
</div>
<!-- ── Source (repo only) ── -->
<h6 class="anonymize-section-title" ng-show="detectedType === 'repo'">
<i class="fas fa-code-branch"></i> Source
</h6>
<!-- Auto update (both types) -->
<div ng-show="detectedType === 'repo'">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="update" name="update" ng-model="options.update" />
<label class="form-check-label" for="update">Auto update</label>
<small class="form-text text-muted">Automatically update with the latest changes.</small>
<label for="branch">Branch</label>
<div class="input-group mb-1">
<select class="form-control" id="branch" name="branch" ng-model="source.branch">
<option ng-repeat="b in branches" ng-bind="b.name" value="{{b.name}}"></option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" ng-click="getBranches(true)" title="Refresh" data-toggle="tooltip" data-placement="bottom">
<i class="fa fa-undo"></i>
</button>
</div>
</div>
</div>
<!-- Commit (repo only) -->
<div class="form-group" ng-show="detectedType === 'repo'">
<div class="form-group">
<label for="commit">Commit</label>
<input class="form-control" id="commit" name="commit" pattern="[a-fA-Z0-9]{6,}" ng-model="source.commit" required ng-class="{'is-invalid': anonymize.commit.$invalid}" />
<small class="form-text text-muted">The SHA of the commit to anonymize.</small>
@@ -80,157 +142,150 @@
The commit SHA is not valid.
</div>
</div>
</div>
<h5 class="anonymize-section-title">
<i class="fas fa-chalkboard-teacher"></i> Conference ID
</h5>
<div class="form-group">
<label for="conference">Conference ID <span class="text-muted">(Optional)</span></label>
<input class="form-control" id="conference" name="conference" ng-model="conference" ng-class="{'is-invalid': anonymize.conference.$invalid}" />
<small class="form-text text-muted" ng-show="conference_data">
<a ng-href="{{conference_data.url}}" target="_blank">{{conference_data.name}}</a> will expire on {{conference_data.endDate | date}}.
</small>
<div class="invalid-feedback" ng-show="anonymize.conference.$error.activated">The conference is not activated.</div>
<small class="form-text text-muted" ng-show="!conference_data">Conference ID updates anonymization options automatically.</small>
<div class="form-group" ng-show="detectedType">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="update" name="update" ng-model="options.update" />
<label class="form-check-label" for="update">Auto update</label>
<small class="form-text text-muted">Automatically update with the latest changes.</small>
</div>
</div>
<!-- ── Identity ── -->
<h6 class="anonymize-section-title" ng-show="detectedType">
<i class="fas fa-fingerprint"></i> Identity
</h6>
<div class="form-group" ng-show="detectedType === 'repo'">
<label for="repoId">Anonymized repository ID</label>
<input type="text" class="form-control" name="repoId" id="repoId" ng-class="{'is-invalid': anonymize.repoId.$invalid}" ng-model="repoId" ng-model-options="{ debounce: {default: 1000, blur: 0, click: 0}, updateOn: 'default blur click' }" />
<small class="form-text text-muted">https://anonymous.4open.science/r/{{repoId}}</small>
<div class="invalid-feedback" ng-show="anonymize.repoId.$error.format">ID can only contain letters and numbers.</div>
<div class="invalid-feedback" ng-show="anonymize.repoId.$error.used">{{repoId}} is already used.</div>
</div>
<div class="form-group" ng-show="detectedType === 'pr'">
<label for="pullRequestId">Anonymized pull request ID</label>
<input type="text" class="form-control" name="pullRequestId" id="pullRequestId" ng-class="{'is-invalid': anonymize.pullRequestId.$invalid}" ng-model="pullRequestId" ng-model-options="{ debounce: {default: 1000, blur: 0, click: 0}, updateOn: 'default blur click' }" />
<small class="form-text text-muted">https://anonymous.4open.science/pr/{{pullRequestId}}</small>
<div class="invalid-feedback" ng-show="anonymize.pullRequestId.$error.format">ID can only contain letters and numbers.</div>
<div class="invalid-feedback" ng-show="anonymize.pullRequestId.$error.used">{{pullRequestId}} is already used.</div>
</div>
<div class="form-group" ng-show="detectedType">
<label for="conference">Conference <span class="text-muted">(Optional)</span></label>
<input class="form-control" id="conference" name="conference" ng-model="conference" ng-class="{'is-invalid': anonymize.conference.$invalid}" />
<small class="form-text text-muted" ng-show="conference_data">
<a ng-href="{{conference_data.url}}" target="_blank">{{conference_data.name}}</a> expires {{conference_data.endDate | date}}.
</small>
<div class="invalid-feedback" ng-show="anonymize.conference.$error.activated">The conference is not activated.</div>
<small class="form-text text-muted" ng-show="!conference_data">Links to a conference for automatic settings.</small>
</div>
<!-- ── Anonymization ── -->
<h6 class="anonymize-section-title" ng-show="detectedType">
<i class="fas fa-shield-alt"></i> Anonymization
</h6>
<div class="form-group" ng-show="detectedType">
<label for="terms">Terms to anonymize</label>
<textarea class="form-control" id="terms" name="terms" rows="3" ng-model="terms" ng-model-options="{ debounce: 250 }" ng-class="{'is-invalid': anonymize.terms.$invalid}"></textarea>
<small class="form-text text-muted">One term per line (regex). Replaced by {{site_options.ANONYMIZATION_MASK}}-[N].</small>
<div class="warning-feedback" ng-show="anonymize.terms.$error.regex">Regex characters detected. Escape them if unintentional.</div>
<div class="invalid-feedback" ng-show="anonymize.terms.$error.format">Terms are in an invalid format.</div>
</div>
<!-- ── Display ── -->
<h6 class="anonymize-section-title" ng-show="detectedType">
<i class="fas fa-eye"></i> Display
</h6>
<div ng-show="detectedType">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="link" name="link" ng-model="options.link" />
<label class="form-check-label" for="link">Keep links</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="image" name="image" ng-model="options.image" />
<label class="form-check-label" for="image">Display images</label>
</div>
<h5 class="anonymize-section-title">
<i class="fas fa-shield-alt"></i> Anonymization Options
</h5>
<!-- Anonymized ID: repo -->
<div class="form-group" ng-show="detectedType === 'repo'">
<label for="repoId">Anonymized repository ID</label>
<input type="text" class="form-control" name="repoId" id="repoId" ng-class="{'is-invalid': anonymize.repoId.$invalid}" ng-model="repoId" ng-model-options="{ debounce: {default: 1000, blur: 0, click: 0}, updateOn: 'default blur click' }" />
<small class="form-text text-muted">URL: https://anonymous.4open.science/r/{{repoId}}</small>
<div class="invalid-feedback" ng-show="anonymize.repoId.$error.format">ID can only contain letters and numbers.</div>
<div class="invalid-feedback" ng-show="anonymize.repoId.$error.used">{{repoId}} is already used.</div>
<div ng-show="detectedType === 'repo'">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pdf" name="pdf" ng-model="options.pdf" />
<label class="form-check-label" for="pdf">Display PDFs</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="notebook" name="notebook" ng-model="options.notebook" />
<label class="form-check-label" for="notebook">Display Notebooks</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="page" name="page" ng-model="options.page" ng-disabled="!details.hasPage" />
<label class="form-check-label" for="page">GitHub Pages</label>
</div>
</div>
<!-- Anonymized ID: PR -->
<div class="form-group" ng-show="detectedType === 'pr'">
<label for="pullRequestId">Anonymized pull request ID</label>
<input type="text" class="form-control" name="pullRequestId" id="pullRequestId" ng-class="{'is-invalid': anonymize.pullRequestId.$invalid}" ng-model="pullRequestId" ng-model-options="{ debounce: {default: 1000, blur: 0, click: 0}, updateOn: 'default blur click' }" />
<small class="form-text text-muted">URL: https://anonymous.4open.science/pr/{{pullRequestId}}</small>
<div class="invalid-feedback" ng-show="anonymize.pullRequestId.$error.format">ID can only contain letters and numbers.</div>
<div class="invalid-feedback" ng-show="anonymize.pullRequestId.$error.used">{{pullRequestId}} is already used.</div>
</div>
<!-- Terms -->
<div class="form-group">
<label for="terms">Terms to anonymize</label>
<textarea class="form-control" id="terms" name="terms" rows="3" ng-model="terms" ng-model-options="{ debounce: 250 }" ng-class="{'is-invalid': anonymize.terms.$invalid}"></textarea>
<small class="form-text text-muted">One term per line (regex). Each term will be replaced by {{site_options.ANONYMIZATION_MASK}}-[N].</small>
<div class="warning-feedback" ng-show="anonymize.terms.$error.regex">Regex characters detected. Escape them if unintentional.</div>
<div class="invalid-feedback" ng-show="anonymize.terms.$error.format">Terms are in an invalid format.</div>
</div>
<div class="form-group">
<label for="expiration">Expiration strategy</label>
<select class="form-control" id="expiration" name="expiration" ng-model="options.expirationMode">
<option value="never" selected>Never expire</option>
<option value="redirect">Redirect to GitHub when expired</option>
<option value="remove">Remove when expired</option>
</select>
</div>
<div class="form-group" ng-hide="options.expirationMode=='never'">
<label for="expirationDate">Expiration date</label>
<input class="form-control" type="date" name="expirationDate" id="expirationDate" ng-model="options.expirationDate" />
<small class="form-text text-muted" ng-show="options.expirationMode=='remove'">After {{options.expirationDate | date}}, the content will be removed.</small>
<small class="form-text text-muted" ng-show="options.expirationMode=='redirect'">After {{options.expirationDate | date}}, visitors will be redirected to GitHub.</small>
</div>
<!-- Advanced options -->
<div class="accordion mb-3" id="advancedOptions">
<div class="card">
<div class="card-header" id="headingAdvanced">
<h2 class="mb-0">
<button class="btn btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseAdvanced" aria-expanded="true" aria-controls="collapseAdvanced">
<i class="fas fa-cog mr-1"></i> Advanced options
</button>
</h2>
</div>
<div id="collapseAdvanced" class="collapse show" aria-labelledby="headingAdvanced" data-parent="#advancedOptions">
<div class="card-body">
<!-- Shared options -->
<div class="form-group mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="link" name="link" ng-model="options.link" />
<label class="form-check-label" for="link">Keep links</label>
<small class="form-text text-muted">Keep or remove all the links.</small>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="image" name="image" ng-model="options.image" />
<label class="form-check-label" for="image">Display images</label>
<small class="form-text text-muted">Images are not anonymized.</small>
</div>
<!-- Repo-specific options -->
<div ng-show="detectedType === 'repo'">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pdf" name="pdf" ng-model="options.pdf" />
<label class="form-check-label" for="pdf">Display PDFs</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="notebook" name="notebook" ng-model="options.notebook" />
<label class="form-check-label" for="notebook">Display Notebooks</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="page" name="page" ng-model="options.page" ng-disabled="!details.hasPage" />
<label class="form-check-label" for="page">GitHub Pages</label>
<small class="form-text text-muted">Enable anonymized GitHub Pages at https://anonymous.4open.science/w/{{repoId}}</small>
</div>
</div>
<!-- PR-specific options -->
<div ng-show="detectedType === 'pr'">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="date" name="date" ng-model="options.date" />
<label class="form-check-label" for="date">Display dates</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="username" name="username" ng-model="options.username" />
<label class="form-check-label" for="username">Display username</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="comments" name="comments" ng-model="options.comments" />
<label class="form-check-label" for="comments">Display comments</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="diff" name="diff" ng-model="options.diff" />
<label class="form-check-label" for="diff">Display diff</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="origin" name="origin" ng-model="options.origin" />
<label class="form-check-label" for="origin">Display project name</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="title" name="title" ng-model="options.title" />
<label class="form-check-label" for="title">Display PR title</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="body" name="body" ng-model="options.body" />
<label class="form-check-label" for="body">Display PR body</label>
</div>
</div>
</div>
</div>
</div>
<div ng-show="detectedType === 'pr'">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="title" name="title" ng-model="options.title" />
<label class="form-check-label" for="title">PR title</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="body" name="body" ng-model="options.body" />
<label class="form-check-label" for="body">PR body</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="diff" name="diff" ng-model="options.diff" />
<label class="form-check-label" for="diff">Diff</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="comments" name="comments" ng-model="options.comments" />
<label class="form-check-label" for="comments">Comments</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="username" name="username" ng-model="options.username" />
<label class="form-check-label" for="username">Usernames</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="date" name="date" ng-model="options.date" />
<label class="form-check-label" for="date">Dates</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="origin" name="origin" ng-model="options.origin" />
<label class="form-check-label" for="origin">Project name</label>
</div>
</div>
</div>
<!-- ── Expiration ── -->
<h6 class="anonymize-section-title" ng-show="detectedType">
<i class="far fa-clock"></i> Expiration
</h6>
<div class="form-group" ng-show="detectedType">
<select class="form-control" id="expiration" name="expiration" ng-model="options.expirationMode">
<option value="never" selected>Never expire</option>
<option value="redirect">Redirect to GitHub when expired</option>
<option value="remove">Remove when expired</option>
</select>
</div>
<div class="form-group" ng-show="detectedType && options.expirationMode!='never'">
<label for="expirationDate">Expiration date</label>
<input class="form-control" type="date" name="expirationDate" id="expirationDate" ng-model="options.expirationDate" />
<small class="form-text text-muted" ng-show="options.expirationMode=='remove'">After {{options.expirationDate | date}}, the content will be removed.</small>
<small class="form-text text-muted" ng-show="options.expirationMode=='redirect'">After {{options.expirationDate | date}}, visitors will be redirected to GitHub.</small>
</div>
<div class="alert alert-danger" role="alert" ng-if="error" ng-bind="error"></div>
<div class="anonymize-submit-bar" ng-show="sourceUrl && detectedType">
<!-- Repo submit -->
<div class="anonymize-submit-bar" ng-show="detectedType">
<button type="submit" class="btn btn-primary btn-block" ng-click="anonymizeRepo($event)" ng-if="detectedType === 'repo' && !isUpdate">
<i class="fas fa-user-secret mr-1"></i> Anonymize Repository
</button>
<button type="submit" class="btn btn-primary btn-block" ng-click="anonymizeRepo($event)" ng-if="detectedType === 'repo' && isUpdate">
<i class="fas fa-save mr-1"></i> Update Repository
</button>
<!-- PR submit -->
<button type="submit" class="btn btn-primary btn-block" ng-click="anonymizePullRequest($event)" ng-if="detectedType === 'pr' && !isUpdate">
<i class="fas fa-user-secret mr-1"></i> Anonymize Pull Request
</button>
@@ -241,55 +296,5 @@
</form>
</div>
</div>
<!-- Preview: repo README -->
<div class="col-md-8 p-2 overflow-auto markdown-body body anonymize-preview-col" ng-bind-html="html_readme" ng-if="detectedType === 'repo' && html_readme"></div>
<!-- Preview: PR content -->
<div class="col-md-8 p-2 overflow-auto anonymize-preview-col" ng-if="detectedType === 'pr' && details">
<div class="d-flex w-100 justify-content-between align-items-center flex-wrap">
<h2 class="pr-title mb-1">
<span ng-if="options.title">{{anonymizePrContent(details.pullRequest.title)}}</span>
<span class="badge" ng-class="{'badge-success':details.pullRequest.merged, 'badge-warning':details.pullRequest.state=='open', 'badge-danger':details.pullRequest.state=='closed' && !details.pullRequest.merged}">
{{details.pullRequest.merged ? "merged" : details.pullRequest.state | title}}
</span>
</h2>
<small ng-bind="details.pullRequest.updatedDate | date" ng-if="options.date"></small>
</div>
<small ng-if="options.origin">Pull Request on {{details.pullRequest.baseRepositoryFullName}}</small>
<div class="pr-body shadow-sm p-3 mb-4 rounded" style="background: var(--sidebar-bg-color)" ng-if="options.body">
<markdown content="anonymizePrContent(details.pullRequest.body)" options="options" terms="terms"></markdown>
</div>
<ul class="nav nav-tabs" id="prTabs" role="tablist">
<li class="nav-item" role="presentation" ng-if="options.diff">
<button class="nav-link active" id="pills-diff-tab" data-toggle="pill" data-target="#pills-diff" type="button" role="tab">Diff</button>
</li>
<li class="nav-item" role="presentation" ng-if="options.comments">
<button class="nav-link" ng-class="{'active':!options.diff}" id="pills-comments-tab" data-toggle="pill" data-target="#pills-comments" type="button" role="tab">
<ng-pluralize count="details.pullRequest.comments.length" when="{'0': 'No comment', 'one': 'One Comment', 'other': '{} Comments'}"></ng-pluralize>
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane show active" id="pills-diff" role="tabpanel" ng-if="options.diff">
<div class="pr-diff shadow-sm p-3 mb-4 rounded" style="background: var(--sidebar-bg-color)">
<pre style="overflow-x: auto"><code ng-bind-html="anonymizePrContent(details.pullRequest.diff) | diff"></code></pre>
</div>
</div>
<div class="tab-pane" ng-class="{'show active':!options.diff}" id="pills-comments" role="tabpanel" ng-if="options.comments">
<ul class="pr-comments list-group">
<li class="pr-comment list-group-item" ng-repeat="comment in details.pullRequest.comments">
<div class="d-flex w-100 justify-content-between flex-wrap">
<h5 class="mb-1" ng-if="options.username">@{{anonymizePrContent(comment.author)}}</h5>
<small ng-bind="comment.updatedDate | date" ng-if="options.date"></small>
</div>
<p class="mb-1">
<markdown class="pr-comment-body" ng-if="options.body" content="anonymizePrContent(comment.body)" options="options" terms="terms"></markdown>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>