项目详情:顶部信息排版调整,修改显示bug

This commit is contained in:
caishi 2021-06-29 14:03:53 +08:00
parent 1cdf316852
commit 4b832f40c0
3 changed files with 96 additions and 102 deletions

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { Spin, Tooltip } from 'antd';
import { Link, Route, Switch } from 'react-router-dom';
import { Content , FlexAJ , AlignCenter } from '../Component/layout';
import { Content , FlexAJ , AlignTop } from '../Component/layout';
import DetailBanner from './sub/DetailBanner';
import Invite from './sub/Invite';
import '../css/index.scss'
@ -393,11 +393,11 @@ class Detail extends Component {
textFunc = (forked_from_project_id,fork_info)=>{
let type = fork_info && fork_info.fork_project_user_type;
return forked_from_project_id && fork_info ?
<div className="color-grey-9">
<div className="color-grey-9 df">
<span>复刻自</span>
<Link to={`${type ==="Organization" ? "/organize":'/users'}/${fork_info.fork_project_user_login}`} className="show-user-link color-grey-6">{fork_info.fork_project_user_name}</Link>
<Link to={`${type ==="Organization" ? "/organize":'/users'}/${fork_info.fork_project_user_login}`} className="show-user-link color-grey-6 ml5">{fork_info.fork_project_user_name}</Link>
<span> / </span>
<Link to={`/projects/${fork_info.fork_project_user_login}/${fork_info.fork_project_identifier}`} className="color-grey-6">{fork_info.fork_form_name}</Link>
<Link to={`/projects/${fork_info.fork_project_user_login}/${fork_info.fork_project_identifier}`} className="color-grey-6 task-hide flex1" style={{maxWidth:"400px"}} title={fork_info.fork_form_name}>{fork_info.fork_form_name}</Link>
</div> : ""
}
@ -426,29 +426,32 @@ class Detail extends Component {
<div>
<div className="detailHeader-wrapper">
<div className="normal">
<FlexAJ style={{paddingTop:"15px"}}>
<AlignCenter>
<AlignTop style={{padding:"20px 0px 10px",justifyContent:"space-between"}}>
<div>
<AlignTop>
<div className="projectallName">
{project && project.author &&
<Link to={`${project.author.type ==="Organization" ? "/organize":'/users'}/${project.author.login}`}>{project.author.name}</Link>
}
<span className="ml5 mr5">/</span>
<Link to={`/projects/${owner}/${projectsId}`} className="projectN">{project && project.name}</Link>
<Link to={`/projects/${owner}/${projectsId}`} className="projectN mt6">{project && project.name}</Link>
</div>
{ projectDetail && projectDetail.private && <span className="privateTag">私有</span>}
{ projectDetail && projectDetail.private && <span className="privateTag mt6">私有</span>}
</AlignTop>
<div className="mt8">
{
projectDetail && projectDetail.type && projectDetail.type !== 0 ?
projectDetail.type === 2 ?
<Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
<i className="iconfont icon-banbenku font-18 mt6" style={{ color: "#8D90E3" }}/>
</Tooltip>
:
<Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
<i className="iconfont icon-jingxiang font-18 color-green mt6" />
</Tooltip>
projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
this.textFunc(projectDetail.forked_from_project_id,projectDetail.fork_info)
:""
}
</AlignCenter>
{
projectDetail && projectDetail.type && projectDetail.type !== 0 ?
<span className="color-grey-9">镜像自 <span className="color-grey-6">{projectDetail.mirror_url}</span></span>
:""
}
</div>
</div>
<div>
{
firstSync ? "":
<span className="df">
@ -506,20 +509,12 @@ class Detail extends Component {
</span>
</span>
}
</FlexAJ>
<FlexAJ>
<div>
{
projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
this.textFunc(projectDetail.forked_from_project_id,projectDetail.fork_info)
:""
}
</div>
{
projectDetail && projectDetail.invite_code &&
<Invite code={projectDetail.invite_code} />
<Invite code={projectDetail.invite_code} className={"mt8 textRight"}/>
}
</FlexAJ>
</div>
</AlignTop>
{
firstSync ? "" :
<DetailBanner

View File

@ -1,7 +1,7 @@
import React from 'react';
import { Tooltip , message } from 'antd';
function Invite({code}) {
function Invite({code,className}) {
function jsCopy(id) {
const copyEle = document.querySelector(id); //
@ -13,7 +13,7 @@ function Invite({code}) {
message.success('复制成功');
}
return(
<div>
<div className={className}>
<span>邀请码: <span id="devitecode">{code}</span></span>
<Tooltip title={<p className="edu-txt-center">可以通过邀请码邀请成员加入项目<br/>点击复制邀请码</p>} placement={"bottom"}>
<i className="iconfont icon-fuzhi2 font-16 color-blue ml8" onClick={()=>jsCopy("#devitecode")}></i>

View File

@ -8,18 +8,17 @@ ul,ol,dl{
color: #333;
}
.projectallName{
display: flex;
align-items: center;
font-size: 22px;
font-weight: normal;
line-height: 30px;
max-width: 850px;
.projectN{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
max-width: 500px;
word-break: break-all;
}
}
.textRight{
text-align: right;
}
.main{
width: 1200px;
padding:20px;